0. この記事は何か
タイトル通りですが、Supabaseの認証基盤でLINEアカウントを使用するための設定等についてまとめた記事です。
SupabaseのCustom OIDC Providerの機能を使うことで、LINE LIFF(LINE Front-end Framework)は使わず、一般的なWebアプリとして動作させることができます。
各種の設定画面が複雑で、毎回迷子になってしまうので、メモをかねて記事にします。
なお、技術的な要点については、以下の記事が参考になるかと思います。
1. LINE側の設定
LINE Debelopers Consoleからプロバイダー・チャネルを作成します。
1.1. プロバイダーから「作成」をクリック
1.2. プロバイダー名を入力して「作成」
1.3. 画面左の「LINEログイン」をクリック
1.4. 必要事項を入力して「作成」
サービスを提供する国は「日本」になると思います。
アプリタイプは「ウェブアプリ」にしてください。
他は任意です。
1.5. チャネルが登録される
チャネルが登録されるので、「①チャンネルID」と「②チャネルシークレット」を控えておく。
※チャネルシークレットは機密情報なので慎重に取り扱うこと
2. Supabase側の設定
Supabase Dashboardから以下の設定を行います。
2.1. Organizationを選択 ⇒ Projectを選択
LINEアカウントでの認証を行うプロジェクトを選択します。
Organizationを選択（以下の例では「Sandbox」。実際に使用するものを選択）
Projectを選択（以下の例では「test」。実際に使用するものを選択）
2.2. Authentificationを選択
プロジェクトの画面で、左のサイドバーから「Authentification」を選択
2.3. Singn In / Providoers を選択
2.4. Custom Provider ⇒ New Provider を選択
2.5. Custom Auth Provider を作成
以下を入力して「Create and enable provider」をクリックし、Providerを作成
| 項目 | 設定値 |
|---|---|
| Provider Itendifer | 「line」 |
| Display Name | 任意。「LINE」など |
| Configuration Method | 「Manual Configuration」 |
| Issuer URL | 「https://access.line.me」 |
| Authorization URL | 「https://access.line.me/oauth2/v2.1/authorize」 |
| Token URL | 「https://api.line.me/oauth2/v2.1/token」 |
| Userinfo URL | 「https://api.line.me/oauth2/v2.1/userinfo」 |
| JWKS URI | 「https://api.line.me/oauth2/v2.1/certs」1 |
| Client ID | LINEのチャネルで控えた「①チャンネルID」 |
| Client Secret | LINEのチャネルで控えた「②チャネルシークレット」 |
| Scopes | 「openid, profile」「5.3. メールアドレスの連携」も参照 |
| Allow users without email | 有効 |
| Callback URL | 自動で入る。「③コールバックURL」として控えておく |
3. LINE側へcallback URLを反映
再度、LINEのチャネルの設定を開き、以下を設定します。
3.1 callback URL
チャネルの設定から、「LINEログイン設定」を選択し、コールバックURLの「編集」ボタンをクリックする。
3.1 callback URLの編集
Supabaseの設定で控えた「③コールバックURL」を入力し、「更新」をクリック
4. 使用法
ここまでの設定により、プロバイダ名「custom:line」を指定することで、LINE アカウントが使用できるようになります。Next.js の例を以下に示します。
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
);
async function signInWithLine() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: "custom:line",
options: {
redirectTo: `${window.location.origin}/auth/callback`,
// iOS Safari のログイン失敗を避ける（詳細は 5.1．Safari用のパラメタ 参照）
queryParams: {
disable_auto_login: "true",
},
},
});
if (error || !data.url) {
// エラー処理
return;
}
window.location.assign(data.url);
}
5. 注意点
5.1. iOS用のパラメタ
「4. 使用法」のサンプルソースに入れている「disable_auto_login=true」についてです。
簡単に言うと、このパラメタを指定しないと、LINEアプリがインストールされているiOS端末(ブラウザがSarafi)で、処理が失敗します。
ちょっと分かりにくいですが、詳細は以下のページを参照してください。
上のページでは、プライベートブラウジングが有効な場合に発生、とありますが、Safariの環境では通常の状態でも発生します。
また、失敗した場合にこのオプションがついているページに誘導してね、という書き方ですが、どうせ失敗するので初めからこのオプションを付けておけばよいと思います。
このオプションを付けると、アプリを介在させずに、ブラウザだけで処理を行うようになり、問題が起きなくなる、という感じです。
5.2. 本番運用を開始するとき
本番運用を開始するときは、LINE Developersからチャネルを「開発中」から「公開済み」ステータスに変更してください。ここを変更しないと、自分自身か、特定のユーザしか認証が通りません。
5.3. メールアドレスの連携
この記事の設定だけだと、LINEからメールアドレスを取得することができません。
メールアドレスの取得が必要な場合は、以下のページを参考に、申請を行ったうえで、「2.5 Custom Auth Provider を作成」の「Scopes」に「email」を追加してください。
私自身はやったことが無いのですが、これで取得できるようになるはずです。多分。
-
冒頭の参考記事に自動で埋まると書いてあったが、うまくいかなかったため手動で入力。 ↩