ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

Auth0 と連携して Bubble で LINE ログインを実装する方法

f:id:yksmt:20200528131757p:plain

皆さん、こんにちは!今回は、日本国内で最も普及率が高い SNS である LINE アカウントを使用したソーシャルログインを Bubble で実現する方法について、ご紹介したいと思います。

今回 LINE アカウントを使用するために、Auth0 というサービスを利用しますが、Auth0 は LINE に限らず、Google や Facebook はもちろん、docomo や Yahoo! なども連携することが可能です。日本特有のアカウントが使用できるサービスですので、是非チェックしてみてくださいね。

また Auth0 では、Sign in with Apple も利用できます。最近の iOS のソーシャルログインできるアプリは、これができないと強制的にリジェクトされることもあるため、Apple ID の連携は、今後実装すべき機能になってくるかもしれませんね。

では、早速始めていきましょう!

1. Auth0 について

Auth0 は2013年に Microsoft 出身の CEO兼共同創業者であるユヘニオ・ペイス (Eugenio Pace) 氏らによって創業され、ウェブやモバイルなどのアプリケーションに対して、認証や認可といった機能を提供してくれるサービスです。Auth0 を利用することで、ソーシャルログインなどの機能を気軽にアプリに取り込むことができるほか、Activie Directory の連携や SSO(シングルサインオン)の実装などもできるようになります。

auth0.com

1-1. Auth0 にサインアップ

まずは Auth0 にサインアップしていきます。既に Auth0 アカウントをお持ちの方は、読み飛ばしてくださいね。

f:id:yksmt:20200528145510p:plain

auth0.com

上記、Auth0 サイトのサインアップからアカウントを作成すると、TENANT と呼ばれる領域もあわせて作成されドメインが発行されます。そして、Auth0 では、このドメイン内にAPIで使用するエンドポイントなどの環境を作成していきます。ドメインは後ほど使用しますのでメモしておきましょう。

f:id:yksmt:20200528145858p:plain

アカウントタイプを回答します。今回はテスト用で使用しますので「Personal」としました。

f:id:yksmt:20200528150155p:plain

また、Auth0 よりアカウント登録の確認メールが送信されますので、メールも合わせて確認しておくようにしましょう。

2. LINE Developers

では、次に LINE ログインが利用できるように LINE Developers に登録を行います。

2-1. LINE Developers に登録

f:id:yksmt:20200528151549p:plain

developers.line.biz

上記サイトから LINE Developers に登録を行います。LINEアカウントがあれば、簡単にアカウント作成が可能です。

2-2. プロバイダーとチャネルの作成

LINE Developers への登録が完了したら、「新規プロバイダー作成」ボタンでプロバイダーを作成していきます。

f:id:yksmt:20200528152423p:plain

プロバイダー名を入力します。ここでは「Auth0」としました。

f:id:yksmt:20200528152627p:plain

次にチャネルを登録していきます。「LINEログイン」をクリックします。

f:id:yksmt:20200528152727p:plain

チャンネルの登録項目は以下の通りです。

項目 詳細
チャネルの種類 LINEログイン
プロバイダー 作成したプロバイダー名
チャネルアイコン 任意
チャネル名 チャンネルの名前
チャネル説明 チャンネルの説明
アプリタイプ ウェブアプリ
メールアドレス 自分のメールアドレス
プライバシーポリシーURL 任意
サービス利用規約URL 任意

必要な項目を入力したら、最後に LINE Developers Agreement に同意のチェックをして作成していきます。

f:id:yksmt:20200528152843p:plain

f:id:yksmt:20200528153648p:plain

f:id:yksmt:20200528153702p:plain

チャネルが作成できました。

f:id:yksmt:20200528154056p:plain

では、作成したチャネルをクリックして、Auth0 と連携する設定を行いましょう。「LINEログイン設定」タブから、「ウェブアプリ」の項目をONにして、コールバックURLに「https://TENANTドメイン.auth0.com/login/callback」と登録します。TENANTドメイン の部分は、前項でメモしておいた Auth0 で発行された TENENT ドメインに置き換えてください。

f:id:yksmt:20200528154256p:plain

では次に「チャネル基本設定」タブにある、「チャネルID」と「チャネルシークレット」を Auth0 の設定で使用しますので、メモしておきましょう。

f:id:yksmt:20200528155010p:plain

なお「チャネル基本設定」タブにある「OpenID Connect」の「メールアドレス取得権限」は、LINEログインを使用した際に、ユーザーのメールアドレスを取得する権限の有無となります。LINE ログインでは、ユーザーのメールアドレスを取得するには申請が必要になります。Bubble では、ユーザーを一意に識別する値をして、デフォルトではメールアドレスを使用しているため、必要に応じて申請するようにしてくださいね。

f:id:yksmt:20200528155751p:plain

以上で、LINE Developers の設定が完了しました。

3. Auth0 と LINE の連携

では、先ほど取得した LINEログインの設定情報を Auth0 側で登録していきましょう!

3-1. Auth0 の Social 設定

Auth0 の Connections にある Social メニューから、LINEロゴをクリックします。

f:id:yksmt:20200528161747p:plain

LINE設定の画面に登録する項目は以下の通りです。登録ができたら SAVE しておきましょう。

項目 詳細
Channel ID メモしておいたチャネルID
Channel Secret メモしておいたチャネルシークレット
Basic Profile チェック(固定)
Email address 申請が必要

f:id:yksmt:20200529105107p:plain

3-2. Auth0 アプリの作成と設定

では、次に Auth0 でアプリを作成していきます。ここで作成した Auth0 アプリに Bubble から接続を行うことで、Auth0 のソーシャルログイン機能を利用することができるようになります。

Applications ページの「+CREATE APPRICATIONS」ボタンをクリックします。

f:id:yksmt:20200528163013p:plain

Create application の Name にアプリ名を入力し、「Regular WebApplications」を選択して CREATE します。ここで登録した名称は、Bubble から Auth0 を呼び出したタイミングで画面に表示されることになります。ここでは、アプリ名を「ノーコードラボ LINE」としています。

f:id:yksmt:20200529102007p:plain

作成したアプリの Settings から「Client ID」と「Client Secret」をメモしておきましょう。この値は後ほど、Bubble 側の設定で使用します。

f:id:yksmt:20200528172342p:plain

次に Connections タブで、Social の Line をオンにしておきます。 この設定で、Bubble から Auth0 に接続した際に、サインインで使用したい SNS の種類を複数指定することができます。今回は LINE のみをオンとしています。

f:id:yksmt:20200528172756p:plain

3-3. 連携テスト

Auth0 と LINE の連携ができましたので、一度接続をテストしておきましょう。

もう一度 Social ページに戻り、LINE を選択します。Apprications タブを選択し、先ほど作成したアプリをオンにして、「SAVE」ボタンをクリックします。

f:id:yksmt:20200529102423p:plain

Settings タブを開き「TRY」ボタンをクリックすると、LINEのソーシャルログイン画面が開きますので、テストしてみてくださいね。

f:id:yksmt:20200529102730p:plain

以上で、Auth0 と LINE の連携が完了です!

4. Bubble アプリの設定

では、いよいよ Bubble 側のアプリ作成です。まずは、Auth0 に Bubble から接続できるように API Connecter プラグインをインストールします。

なお、プラグインのインストール方法については、以下の記事を、

blog.nocodelab.jp

API Connecter の使い方については、以下の記事でも詳しく紹介していますので、 ご参考くださいね!

blog.nocodelab.jp

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 email

f:id:yksmt:20200529113934p:plain

また上記の図の通り、ソーシャルログインした際に、LINEユーザーのアカウント情報(アイコン画像など)を取得したい場合は、呼び出し部分を「expand」から GET メソッドで設定しておきましょう。

「Initialize call」ボタンをクリックして、API から返却値を受け取って「SAVE」ボタンで保存しておきます。

f:id:yksmt:20200529130702p:plain

この辺りの参考となるドキュメントは以下のリンクを参照してください。

auth0.com

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

f:id:yksmt:20200529131903p:plain

あわせて「Allowed Web Origins」に Bubble アプリのルートアドレスを登録しておきます。

https://Bubbleアプリ名.bubbleapps.io/

f:id:yksmt:20200529131511p:plain

登録したら、忘れずに「SAVE CHANGES」ボタンで設定を保存しておきましょう。

4-3. 画面作成

では、Bubble ページを作成していきましょう。

今回作成するページは、シンプルにログインボタンを配置する index ページと、ログイン後の users ページです。

4-3-1. index ページの作成

まずは、index に「LINEアカウントでサインイン」ボタンを作成します。 f:id:yksmt:20200529132855p:plain

ワークフローは以下の2つを作成します。

  • もしページロード時に既にログインされていたら user ページへ遷移する
  • 「LINEアカウントでサインイン」ボタンをクリックしたら、Auth0 でソーシャルログインさせて、user ページへ遷移させる

users ページへ遷移させる時は、Only when を「Current User is logged in」としておきましょう。

f:id:yksmt:20200529133354p:plain

ソーシャルログインのアクションは、Account で「Signup/login with a social network」を選択し、OAuth provider に API Connecter で設定した API名(ここでは API-Auth0-LINE)を選択します。

ソーシャルログインのアクションが追加できたら、Step2 にページロード時にも作成している、user ページへ遷移させるアクションを追加しておきます。

f:id:yksmt:20200529133731p:plain

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」で取得することができます。

f:id:yksmt:20200529134930p:plain

テストしやすいように「ログアウト」ボタンを配置しておきます。ワークフローには、「ログアウト」ボタンがクリックされたときのイベントだけ追加しておきます。

f:id:yksmt:20200529140018p:plain

あとは、ログインしていないユーザーは index ページへ遷移させて閉め出しておくと良いですね。

f:id:yksmt:20200529140442p:plain

4-4. プレビューして確認

では、LINE アカウントでソーシャルログインが出来るか、プレビューして動作確認しておきましょう!

Bubble ページの「LINE アカウントでサインイン」ボタンをクリックしたら...

f:id:yksmt:20200529140709p:plain

Auth0 アプリを呼び出して...

f:id:yksmt:20200529140759p:plain

LINEで認証を行い…

f:id:yksmt:20200529141002p:plain

Auth0 から Bubble ページへリダイレクトされてきます。

f:id:yksmt:20200529141109p:plain

いかがですか?うまくいきましたか?

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.」とエラーになりますので、あわせてご注意ください。

f:id:yksmt:20200529142148p:plain

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」と表示される場合があります。

この場合は、マニュアルには「自動で更新」とありますが、一度プレビューなどを行いエンドポイントを再呼び出しすることで解消されることがありますので、試してみてくださいね。

f:id:yksmt:20200529142816p:plain

API Connecter についてのマニュアルは、以下URLです。

manual.bubble.io

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」や「電子メールがすでに使用されている場合」といった感じでエラーとなり、重複データとして取り扱われてしまいます。

f:id:yksmt:20200529144241p:plain

そういった場合は、API Connecter の設定で、User ID key path の値を「sub」ではなく「email」とすることで回避することができますので、ご参考くださいね。

f:id:yksmt:20200529145135p:plain

8. まとめ

いかがでしたか?今回は、LINE アカウントを使用したソーシャルログインを Bubble で実現する方法について、ご紹介しました!
ここまでお読みいただき、ありがとうございました。では、次回もどうぞお楽しみに~!

9. Auth0 からのログアウト方法(2020/09/09 追記)

この記事ではログインの方法しか説明していませんが、Auth0 からのログアウトについてもご質問を受けました。
あぽとさんとたかしさんが詳しくまとめてくれていますので、お二人の記事を紹介させていただきます!

note.com

note.com

おすすめ記事

以下の記事では、Google と Twitter を使用したソーシャルログインの方法をご紹介しています!

blog.nocodelab.jp

blog.nocodelab.jp