SNSアカウント利用のログイン(SSO)設定方法
SNSアプリの導入方法をご案内いたします。
SNSログインをONにすることでユーザーが会員登録する際、ユーザーが保持しているSNSアカウントを使うことで情報登録の手間を省くことが出来ます。
SNSログインを使う際は自社でSNSアプリを管理画面に登録することを推奨しています。各種SNSアプリの発行方法は下の記事をご確認ください。
対応しているSNS
現状triplaでサポートしているSNSアカウントは以下の通りとなります。
Facebook
LINE
Open IDプロトコルを使用しているサービス
Facebook・LINEについてはID等の連携を行わず設定をONにした場合、triplaの設定を利用しサインオンさせることが可能です。
SNSログイン方法
ユーザーがSNSログインする際のステップは以下の通りとなります。
ログイン画面にて該当するSNSを選択する
承認画面が表示されるので承認を選択する
Facebookアプリ設定方法(サブドメイン機能使用時)
アカウント作成
Facebook Developer PortalにてFacebook Login Applicatonを作成する。
“Facebook Login” を追加する。
アプリの作成を行います。
画面右上か中央に配置されている[アプリの作成]を選択します。
任意のアプリタイプの選択を行います。
アプリ名・メールアドレスを入力し、[アプリを作成]を選択します。
作成を行うと下の画像のような画面に遷移します。
[アプリの設定]→[ベーシック]を選択します。
下の表のように設定を行ってください。
画面下部の[変更を保存]を選択し内容を登録します。
設定が完了したらアプリのモードを[開発]から[ライブ]に入り替えます。
[ダッシュボード]→[アプリに製品を追加]から[ビジネス用Facebookログイン]の[設定]を選択します。
[埋め込みブラウザーOAuthログイン]・[JavaScript SDKでログイン]を[はい]に切り替えます。
[有効なOAuthリダイレクトURI]には、サブドメインを使用している場合はサブドメインURLを入力し、使用していない場合は自社ホームページのURLを入力します。
[JavaScript SDKに許可されたドメイン]にはホテルのURLとブッキングウィジェット (サブドメインもしくは tripla ブッキングウィジェット) のURLを入力します。
入力が完了したら画面下部の[変更を保存]を選択します。
tripla管理画面の[設定]→[ウィジェット設定]から[ログイン表示設定]を選択します。
シングルサインオン設定をONにし、[SSOを追加する]からFacebookを選択します。
アプリID・秘密鍵を入力します。
アプリID・秘密鍵はFacebook Developerの[設定]→[ベーシック]画面で確認可能です。
入力後[保存]を選択し設定完了です。
※サブドメインの設定によりブッキングエンジンの立ち上げURLが異なります。
サブドメインを利用している場合:サブドメインのURLのみ
サブドメインを利用していない場合:http://のつかないURL
本番環境でアプリを使う際はProductionモードへ変更してください。
参考情報
https://developers.facebook.com/docs/apps/?locale=ja_JP#register
LINEアプリ設定方法(サブドメイン機能使用時)
アカウント作成
LINE Developers Portalにアクセスし新しいプロバイダーとチャネルを登録してください。
チャネルにてLINEログインを登録してください。
入力必須項目を登録してください。ウェブアプリを選択してください。
コールバックURLにブッキングエンジンのURLを登録してください。
本番環境でアプリを使う際は公開してください。
参考情報
https://developers.line.biz/ja/docs/line-login/integrate-line-login/
管理画面設定
施設管理画面から [ 設定 ]→[ ウィジェット設定]を選択してください。
ログイン表示設定のタブを開いてください。
シングルサインオン(SSO)設定をオンにし、LINEにチェックを入れてください。
LINE Developer PortalのBasic Settingsに記載されているLINEチャネルIDとLINEチャネルシークレットを登録してください。
LINEログイン設定に記載されているLINEコールバックURLを登録してください。
更新するを押して設定を保存してください。
LINEDevelopersの設定(サブドメイン機能使用時)
[設定]→[ウィジェット設定]→[ログイン表示設定]のSNSログイン/サインアップからLINE設定を行っている場合LINEDevelopersでの設定が必要です。
下のリンクからログインを行ってください。
プロバイダーの作成を行います。
プロバイダーの右に表示されている[作成]を選択します。
任意の名前を設定し、[作成]を行います。
[Messaging API]を選択します。
新規チャネル作成画面が開きますので、適当な内容の入力を行います。
[作成]を選択し、規約を確認の上、同意を選択すると作成は完了です。
[チャネル基本設定]画面を開きます。
画面下部の[OpenID Connect]→[メールアドレス取得]→[申請]を選択します。
メールアドレス取得制限の申請という画面が表示されますので、
表示される2つのチェックボックスにチェックを入れ、保存を選択します。
メールアドレス取得が「申請済み」と表示されると設定完了です。
[LINEログイン設定]を選択し、コールバックURLを入力します。
tripla管理画面での設定を行います。
施設管理画面から[設定]→[ウィジェット設定]→[ログイン表示設定]を選択します。
下の表の通り設定を行ってください。
ログインを行う際に下のようなエラー画面が表示される場合、コールバックURLが間違っている場合があります。
エラーページのURLに表示されている「redirect_uri=」の後ろに表示されているURLをコールバックIDに追加してください。
例:https%3A%2F%2Fbooking.tripla-ryokan.com
※%3Aは「:」に、%2Fは「/」に変更し登録を行ってください。
GoogleとのSNS連携
GoogleとのSNS連携については下のリンクからご確認ください。
Yahoo!とのSNS連携
Yahoo!とのSNS連携については下のリンクからご確認ください。
最終更新