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” を追加する。
アプリの作成を行います。
画面右上か中央に配置されている[アプリの作成]を選択します。
任意のアプリタイプの選択を行います。
アプリ名・メールアドレスを入力し、[アプリを作成]を選択します。
作成を行うと下の画像のような画面に遷移します。
[アプリの設定]→[ベーシック]を選択します。
下の表のように設定を行ってください。
| タイトル | 詳細 |
|---|---|
アプリドメイン | サブドメインを使用している場合は、サブドメインドメインURLを追加します。 (例：サブドメインがhttps://www.tripla-subdomain.jpの場合、tripla-subdomain.jpのみを追加します) 。ホテルがサブドメインを使用していない場合は、ホテルのURLを追加します。 |
プライバシーポリシーのURL | プライバシーポリシーのURLを入力します。 |
利用規約のURL | 利用規約のURLのURLを入力します。 |
アプリアイコン | ユーザーがログインしようとしたときに表示されるアイコンの設定を行ってください。 |
認証 | ビジネス認証を行います。 詳しい設定方法はFacebookに確認を行ってください。 |
画面下部の[変更を保存]を選択し内容を登録します。
設定が完了したらアプリのモードを[開発]から[ライブ]に入り替えます。
[ダッシュボード]→[アプリに製品を追加]から[ビジネス用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]→[メールアドレス取得]→[申請]を選択します。
メールアドレス取得制限の申請という画面が表示されますので、
表示される２つのチェックボックスにチェックを入れ、保存を選択します。
メールアドレス取得が「申請済み」と表示されると設定完了です。
[LINEログイン設定]を選択し、コールバックURLを入力します。
tripla管理画面での設定を行います。
施設管理画面から[設定]→[ウィジェット設定]→[ログイン表示設定]を選択します。
下の表の通り設定を行ってください。
| タイトル | 詳細 |
|---|---|
LINEチャネルID | LINE developersからコピー |
LINEチャネルシークレット | LINE developersからコピー |
LINEコールバックURL | サブドメイン設定したURLを入力 |
ログインを行う際に下のようなエラー画面が表示される場合、コールバックURLが間違っている場合があります。
エラーページのURLに表示されている「redirect_uri=」の後ろに表示されているURLをコールバックIDに追加してください。
例：https%3A%2F%2Fbooking.tripla-ryokan.com
※%3Aは「:」に、%2Fは「/」に変更し登録を行ってください。
GoogleとのSNS連携
GoogleとのSNS連携については下のリンクからご確認ください。
pageGoogleとのSNS連携Yahoo!とのSNS連携
Yahoo!とのSNS連携については下のリンクからご確認ください。
pageYahoo!とのSNS連携権限 | 作業・閲覧可否 |
ブランド管理者 | 施設管理画面から作業・閲覧可 |
施設管理者 | 作業・閲覧可 |
施設運営者 | 作業・閲覧不可 |
最終更新
