SNSアカウント利用のログイン(SSO)設定方法

SNSアプリの導入方法をご案内いたします。

SNSログインをONにすることでユーザーが会員登録する際、ユーザーが保持しているSNSアカウントを使うことで情報登録の手間を省くことが出来ます。

SNSログインを使う際は自社でSNSアプリを管理画面に登録することを推奨しています。各種SNSアプリの発行方法は下の記事をご確認ください。

対応しているSNS

現状triplaでサポートしているSNSアカウントは以下の通りとなります。

  • Facebook

  • LINE

  • Open IDプロトコルを使用しているサービス

Facebook・LINEについてはID等の連携を行わず設定をONにした場合、triplaの設定を利用しサインオンさせることが可能です。

SNSログイン方法

ユーザーがSNSログインする際のステップは以下の通りとなります。

  • ログイン画面にて該当するSNSを選択する

  • 承認画面が表示されるので承認を選択する

tripla管理画面で行うSSO設定を、施設毎の設定からブランド単位での設定に変更いたしました。

■施設毎のSSO設定をONにしている場合 既に施設毎のSSO設定をONにしている施設様は、引き続き施設毎の設定をご利用いただけます。 また、既に施設毎のSSO設定をONにしている施設様にもブランドのSSO設定が表示されますが、施設毎のSSO設定が優先されます。 なお、施設のSSO設定をOFFにして、ブランドSSO設定をONにすると、ブランドSSO設定が利用されます。

■施設毎のSSO設定をOFFにしている場合 施設毎のSSO設定をOFFにしている施設様は、施設毎のSSO設定の項目が非表示となり、ブランドのSSO設定が利用されます。

現在施設毎のSSO設定を利用されている場合は、ブランドのSSO設定へ移行をお願いいたします。

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を入力します。

入力が完了したら画面下部の[変更を保存]を選択します。

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]からFacebookを選択します。

アプリID・秘密鍵を入力します。

アプリID・秘密鍵はFacebook Developerの[設定]→[ベーシック]画面で確認可能です。

入力後[保存]を選択し設定完了です。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

※サブドメインの設定によりブッキングエンジンの立ち上げURLが異なります。

サブドメインを利用している場合：サブドメインのURLのみ

サブドメインを利用していない場合：http://のつかないURL

本番環境でアプリを使う際はProductionモードへ変更してください。

参考情報

https://developers.facebook.com/docs/apps/?locale=ja_JP#register

LINEアプリ設定方法（サブドメイン機能使用時）

アカウント作成

  1. LINE Developers Portalにアクセスし、BotのLINE連携をしている既存のプロバイダーがある場合はその傘下に、ない場合は新しいプロバイダーを作成し、新しいチャネルを登録してください。

  2. チャネルにてLINEログインを登録してください。

  3. 入力必須項目を登録してください。ウェブアプリを選択してください。

  4. コールバックURLにブッキングエンジンのURLを登録してください。

本番環境でアプリを使う際は公開してください。

参考情報

https://developers.line.biz/ja/docs/line-login/integrate-line-login/

管理画面設定

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]からLINEを選択します。

LINE Developer PortalのBasic Settingsに記載されているLINEチャネルIDとLINEチャネルシークレットを登録してください。

LINEログイン設定に記載されているLINEコールバックURLを登録してください。

更新するを押して設定を保存してください。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

LINEDevelopersの設定（サブドメイン機能使用時）

[設定]→[ウィジェット設定]→[ログイン表示設定]のSNSログイン/サインアップからLINE設定を行っている場合LINEDevelopersでの設定が必要です。

下のリンクからログインを行ってください。

LogoLINE Business ID

プロバイダーの作成を行います。

プロバイダーの右に表示されている[作成]を選択します。

任意の名前を設定し、[作成]を行います。

[Messaging API]を選択します。

新規チャネル作成画面が開きますので、適当な内容の入力を行います。

[作成]を選択し、規約を確認の上、同意を選択すると作成は完了です。

[チャネル基本設定]画面を開きます。

画面下部の[OpenID Connect]→[メールアドレス取得]→[申請]を選択します。

メールアドレス取得制限の申請という画面が表示されますので、

表示される２つのチェックボックスにチェックを入れ、保存を選択します。

メールアドレス取得が「申請済み」と表示されると設定完了です。

[LINEログイン設定]を選択し、コールバックURLを入力します。

tripla管理画面での設定を行います。

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]からLINEを選択します。

下の表の通り設定を行ってください。

タイトル
詳細

LINEチャネルID

LINE developersからコピー

LINEチャネルシークレット

LINE developersからコピー

LINEコールバックURL

サブドメイン設定したURLを入力。 iframeの場合は「https://bw.tripla.ai」を入力

ログインを行う際に下のようなエラー画面が表示される場合、コールバックURLが間違っている場合があります。

エラーページのURLに表示されている「redirect_uri=」の後ろに表示されているURLをコールバックIDに追加してください。

例：https%3A%2F%2Fbooking.tripla-ryokan.com

※%3Aは「:」に、%2Fは「/」に変更し登録を行ってください。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

GoogleとのSNS連携

GoogleとのSNS連携については下のリンクからご確認ください。

GoogleとのSNS連携

Yahoo!とのSNS連携

Yahoo!とのSNS連携については下のリンクからご確認ください。

Yahoo!とのSNS連携

権限

作業・閲覧可否

ブランド管理者

施設管理画面から作業・閲覧可

施設管理者

作業・閲覧可

施設運営者

作業・閲覧不可

前へログイン表示設定次へGoogleとのSNS連携

最終更新

役に立ちましたか？