皆さん、こんにちは！今回は、日本国内で最も普及率が高い SNS である LINE アカウントを使用したソーシャルログインを Bubble で実現する方法について、ご紹介したいと思います。
今回 LINE アカウントを使用するために、Auth0 というサービスを利用しますが、Auth0 は LINE に限らず、Google や Facebook はもちろん、docomo や Yahoo! なども連携することが可能です。日本特有のアカウントが使用できるサービスですので、是非チェックしてみてくださいね。
また Auth0 では、Sign in with Apple も利用できます。最近の iOS のソーシャルログインできるアプリは、これができないと強制的にリジェクトされることもあるため、Apple ID の連携は、今後実装すべき機能になってくるかもしれませんね。
では、早速始めていきましょう！
- 1. Auth0 について
- 2. LINE Developers
- 3. Auth0 と LINE の連携
- 4. Bubble アプリの設定
- 5. LINE連携時の注意点
- 6. API トークンエラーについて
- 7. おまけ Auth0 と Google アカウントの連携
- 8. まとめ
- 9. Auth0 からのログアウト方法（2020/09/09 追記）
- おすすめ記事
1. Auth0 について
Auth0 は2013年に Microsoft 出身の CEO兼共同創業者であるユヘニオ･ペイス (Eugenio Pace) 氏らによって創業され、ウェブやモバイルなどのアプリケーションに対して、認証や認可といった機能を提供してくれるサービスです。Auth0 を利用することで、ソーシャルログインなどの機能を気軽にアプリに取り込むことができるほか、Activie Directory の連携や SSO（シングルサインオン）の実装などもできるようになります。
1-1. Auth0 にサインアップ
まずは Auth0 にサインアップしていきます。既に Auth0 アカウントをお持ちの方は、読み飛ばしてくださいね。
上記、Auth0 サイトのサインアップからアカウントを作成すると、TENANT と呼ばれる領域もあわせて作成されドメインが発行されます。そして、Auth0 では、このドメイン内にAPIで使用するエンドポイントなどの環境を作成していきます。ドメインは後ほど使用しますのでメモしておきましょう。
アカウントタイプを回答します。今回はテスト用で使用しますので「Personal」としました。
また、Auth0 よりアカウント登録の確認メールが送信されますので、メールも合わせて確認しておくようにしましょう。
2. LINE Developers
では、次に LINE ログインが利用できるように LINE Developers に登録を行います。
2-1. LINE Developers に登録
上記サイトから LINE Developers に登録を行います。LINEアカウントがあれば、簡単にアカウント作成が可能です。
2-2. プロバイダーとチャネルの作成
LINE Developers への登録が完了したら、「新規プロバイダー作成」ボタンでプロバイダーを作成していきます。
プロバイダー名を入力します。ここでは「Auth0」としました。
次にチャネルを登録していきます。「LINEログイン」をクリックします。
チャンネルの登録項目は以下の通りです。
| 項目 | 詳細 |
|---|---|
| チャネルの種類 | LINEログイン |
| プロバイダー | 作成したプロバイダー名 |
| チャネルアイコン | 任意 |
| チャネル名 | チャンネルの名前 |
| チャネル説明 | チャンネルの説明 |
| アプリタイプ | ウェブアプリ |
| メールアドレス | 自分のメールアドレス |
| プライバシーポリシーURL | 任意 |
| サービス利用規約URL | 任意 |
必要な項目を入力したら、最後に LINE Developers Agreement に同意のチェックをして作成していきます。
チャネルが作成できました。
では、作成したチャネルをクリックして、Auth0 と連携する設定を行いましょう。「LINEログイン設定」タブから、「ウェブアプリ」の項目をONにして、コールバックURLに「https://TENANTドメイン.auth0.com/login/callback」と登録します。TENANTドメイン の部分は、前項でメモしておいた Auth0 で発行された TENENT ドメインに置き換えてください。
では次に「チャネル基本設定」タブにある、「チャネルID」と「チャネルシークレット」を Auth0 の設定で使用しますので、メモしておきましょう。
なお「チャネル基本設定」タブにある「OpenID Connect」の「メールアドレス取得権限」は、LINEログインを使用した際に、ユーザーのメールアドレスを取得する権限の有無となります。LINE ログインでは、ユーザーのメールアドレスを取得するには申請が必要になります。Bubble では、ユーザーを一意に識別する値をして、デフォルトではメールアドレスを使用しているため、必要に応じて申請するようにしてくださいね。
以上で、LINE Developers の設定が完了しました。
3. Auth0 と LINE の連携
では、先ほど取得した LINEログインの設定情報を Auth0 側で登録していきましょう！
3-1. Auth0 の Social 設定
Auth0 の Connections にある Social メニューから、LINEロゴをクリックします。
LINE設定の画面に登録する項目は以下の通りです。登録ができたら SAVE しておきましょう。
| 項目 | 詳細 |
|---|---|
| Channel ID | メモしておいたチャネルID |
| Channel Secret | メモしておいたチャネルシークレット |
| Basic Profile | チェック（固定） |
| Email address | 申請が必要 |
3-2. Auth0 アプリの作成と設定
では、次に Auth0 でアプリを作成していきます。ここで作成した Auth0 アプリに Bubble から接続を行うことで、Auth0 のソーシャルログイン機能を利用することができるようになります。
Applications ページの「＋CREATE APPRICATIONS」ボタンをクリックします。
Create application の Name にアプリ名を入力し、「Regular WebApplications」を選択して CREATE します。ここで登録した名称は、Bubble から Auth0 を呼び出したタイミングで画面に表示されることになります。ここでは、アプリ名を「ノーコードラボ LINE」としています。
作成したアプリの Settings から「Client ID」と「Client Secret」をメモしておきましょう。この値は後ほど、Bubble 側の設定で使用します。
次に Connections タブで、Social の Line をオンにしておきます。 この設定で、Bubble から Auth0 に接続した際に、サインインで使用したい SNS の種類を複数指定することができます。今回は LINE のみをオンとしています。
3-3. 連携テスト
Auth0 と LINE の連携ができましたので、一度接続をテストしておきましょう。
もう一度 Social ページに戻り、LINE を選択します。Apprications タブを選択し、先ほど作成したアプリをオンにして、「SAVE」ボタンをクリックします。
Settings タブを開き「TRY」ボタンをクリックすると、LINEのソーシャルログイン画面が開きますので、テストしてみてくださいね。
以上で、Auth0 と LINE の連携が完了です！
4. Bubble アプリの設定
では、いよいよ Bubble 側のアプリ作成です。まずは、Auth0 に Bubble から接続できるように API Connecter プラグインをインストールします。
なお、プラグインのインストール方法については、以下の記事を、
API Connecter の使い方については、以下の記事でも詳しく紹介していますので、 ご参考くださいね！
4-1. API Connecter プラグインの設定
では、API Connecter の設定を行いましょう。「Add another API」ボタンをクリックして、API を追加します。
「App ID」と「App Secret」に メモしておいた Auth0 アプリの「ClientID」と「Client Secret」の値を入力します。Dev. は Development（開発環境）用です。
その他の API の具体的な設定値は以下の通りです。リダイレクトやエンドポイントの「TENANTドメイン」の部分は、Auth0 で取得したドメインに適宜置き換えてくださいね。
| 項目 | 設定値 |
|---|---|
| API Name | APIの名称 |
| Authentication | OAuth2 User-Agent Flow |
| App ID | Auth0 の ClientID |
| App Secret | Auth0 の Client Secret |
| Dev.App ID | Auth0 の ClientID（開発環境用） |
| Dev.secret | Auth0 の Client Secret（開発環境用） |
| Scope | openid profile email |
| Authentication goes in the header | チェック |
| Header key | Authorization:Bearer |
| Use a generic redirect URL | チェック |
| Login dialog redirect | https://TENANTドメイン.auth0.com/authorize |
| Access token endpoint | https://TENANTドメイン.auth0.com/oauth/token |
| User profile endpoint | https://TENANTドメイン.auth0.com/userinfo |
| User ID key path | sub |
| User email key path |
また上記の図の通り、ソーシャルログインした際に、LINEユーザーのアカウント情報（アイコン画像など）を取得したい場合は、呼び出し部分を「expand」から GET メソッドで設定しておきましょう。
「Initialize call」ボタンをクリックして、API から返却値を受け取って「SAVE」ボタンで保存しておきます。
この辺りの参考となるドキュメントは以下のリンクを参照してください。
4-2. Auth0 に Bubble の リダイレクトURL を設定
では次に、Bubble の API Connecter の設定で取得したリダイレクト用のURLを、今度は Auth0 側に設定しておきます。
Auth0 の Apprications ページで作成した Auth0 アプリを選択し、Settings タブの Application URIs にある「Allowed Callback URLs 」にリダイレクトURLを登録します。
リダイレクトURL は API Connecter の「Use a generic redirect URL」の項目部分に記載されています。Bubbleアプリ名 の部分は、適宜作成しているURLに置き換えてくださいね。
https://Bubbleアプリ名.bubbleapps.io/api/1.1/oauth_redirect
あわせて「Allowed Web Origins」に Bubble アプリのルートアドレスを登録しておきます。
https://Bubbleアプリ名.bubbleapps.io/
登録したら、忘れずに「SAVE CHANGES」ボタンで設定を保存しておきましょう。
4-3. 画面作成
では、Bubble ページを作成していきましょう。
今回作成するページは、シンプルにログインボタンを配置する index ページと、ログイン後の users ページです。
4-3-1. index ページの作成
まずは、index に「LINEアカウントでサインイン」ボタンを作成します。
ワークフローは以下の2つを作成します。
- もしページロード時に既にログインされていたら user ページへ遷移する
- 「LINEアカウントでサインイン」ボタンをクリックしたら、Auth0 でソーシャルログインさせて、user ページへ遷移させる
users ページへ遷移させる時は、Only when を「Current User is logged in」としておきましょう。
ソーシャルログインのアクションは、Account で「Signup/login with a social network」を選択し、OAuth provider に API Connecter で設定した API名（ここでは API-Auth0-LINE）を選択します。
ソーシャルログインのアクションが追加できたら、Step2 にページロード時にも作成している、user ページへ遷移させるアクションを追加しておきます。
4-3-2. users ページの作成
users ページには、LINE アカウントのアイコンと LINE ID を表示させることにしましょう。
LINE ID は Text エレメントで「Current User's API Connecter名's Id」として取得することができます。
アイコンは、Image エレメントを配置し、Dynamic image で「Get data from an external API」を選択します。次に API provider で、API Connecter の設定で定義した名前を選択して、返却値である「's picture」で取得することができます。
テストしやすいように「ログアウト」ボタンを配置しておきます。ワークフローには、「ログアウト」ボタンがクリックされたときのイベントだけ追加しておきます。
あとは、ログインしていないユーザーは index ページへ遷移させて閉め出しておくと良いですね。
4-4. プレビューして確認
では、LINE アカウントでソーシャルログインが出来るか、プレビューして動作確認しておきましょう！
Bubble ページの「LINE アカウントでサインイン」ボタンをクリックしたら...
Auth0 アプリを呼び出して...
LINEで認証を行い…
Auth0 から Bubble ページへリダイレクトされてきます。
いかがですか？うまくいきましたか？
5. LINE連携時の注意点
LINE でソーシャルログインを実装する場合、前項でも述べましたが、デフォルトではユーザーのメールアドレスまでは取得することができません。メールアドレスの取得には申請が必要です。
その為、Bubble のデータベースには、メールアドレスが空の状態で登録されます。LINEアカウントが異なれば、Bubble の User Type に保存されるデータも新規ユーザーとして登録されますが、LINE ID などを登録するワークフローを追加しない限り、「どのユーザーであるか」といった判定は難しくなりますので、ご注意くださいね。
また、検証において、複数の LINEアカウントで検証を行いたい場合は、LINE Developers のチャンネルを「非公開」から「公開」にしておく必要があります。公開していない場合は、Developers 以外のアカウントで検証した場合、「400 Bad Request This channel is now developing status. User need to have developer role.」とエラーになりますので、あわせてご注意ください。
6. API トークンエラーについて
また、API Connecter で検証をしていると、「Your token is not valid any more. You should sign up again in run mode to get a token to set up and modify your calls」と表示される場合があります。
この場合は、マニュアルには「自動で更新」とありますが、一度プレビューなどを行いエンドポイントを再呼び出しすることで解消されることがありますので、試してみてくださいね。
API Connecter についてのマニュアルは、以下URLです。
7. おまけ Auth0 と Google アカウントの連携
では、最後に折角なので Auth0 で Goolge アカウントを使ったソーシャルログインを実装する場合のポイントについても、あわせてご紹介しておきたいと思います。
Auth0 の設定や ソーシャル側の Google での設定などは、基本的に LINE 連携時と同じ手順（Google API の設定はこちらの記事をご参考ください）になりますが、Google アカウントを使用した場合は、サインアップ後のサインイン処理で、「We cannot link your account to this email because there is already an account for this email」や「電子メールがすでに使用されている場合」といった感じでエラーとなり、重複データとして取り扱われてしまいます。
そういった場合は、API Connecter の設定で、User ID key path の値を「sub」ではなく「email」とすることで回避することができますので、ご参考くださいね。
8. まとめ
いかがでしたか？今回は、LINE アカウントを使用したソーシャルログインを Bubble で実現する方法について、ご紹介しました！
ここまでお読みいただき、ありがとうございました。では、次回もどうぞお楽しみに～！
9. Auth0 からのログアウト方法（2020/09/09 追記）
この記事ではログインの方法しか説明していませんが、Auth0 からのログアウトについてもご質問を受けました。
あぽとさんとたかしさんが詳しくまとめてくれていますので、お二人の記事を紹介させていただきます！
おすすめ記事
以下の記事では、Google と Twitter を使用したソーシャルログインの方法をご紹介しています！
