ソーシャルログイン

ソーシャルログインの設定・実装手順と期間|SNSへの申請からリリースまで

ソーシャルログインの設定・実装は、まず要件を決めて各SNSに申請し、発行されたクライアントIDとコールバックURLを登録してから、自社サイトに実装してテストする、という順で進めます。Login Plusの場合、お問い合わせからリリースまでは最短3週間、平均で約2か月です。期間を左右するのは実装よりも各SNSへの申請で、LINEやAppleには実装の前に済ませておくべき手続きがあります。この記事では要件の決定からリリースまでの流れを順に説明し、SNS別の手続きと、期間が延びがちな原因をまとめました。

ソーシャルログインの設定・実装の流れと期間

ソーシャルログインは、要件を決めて各SNSに申請し、発行された値をログインの仕組みに登録してから、自社サイトへの実装とテストに進みます。Login Plusの場合、お問い合わせからリリースまでは最短3週間、平均で約2か月です。平均的なケースでは、最初の1か月で申請と連携の設定を済ませ、次の1か月で実装とテストを進めます。

SNSの審査にかかる時間は自社では縮められないので、要件が決まったら申請を始め、実装と並行して進めるのが基本です。

時期

段階

主な作業

主な担当

1か月目

STEP1 要件を決める

対応するSNS、取得する情報、既存会員との紐づけ方

事業部門・開発

1か月目

STEP2 各SNSへの申請

開発者登録、アプリの作成、情報を取得するための申請

開発・管理部門

1か月目

STEP3 連携の設定

クライアントIDなどの登録、コールバックURLの設定

開発

2か月目

STEP4 実装

ログインボタン、ログイン後の処理、会員の照合

開発

2か月目

STEP5 テストとリリース

SNS別・環境別の確認、公開

開発・事業部門

ソーシャルログイン・パスキーの導入をご検討中の方へ

LINE・Google・Apple・Yahoo! JAPAN・Facebook・X のログインとパスキーに、1つの実装で対応できます。対応SNS・料金・導入の流れを資料にまとめています。

設定の前に知っておきたいソーシャルログインの仕組み

ソーシャルログインの多くは、OAuth 2.0やOpenID Connectという標準の仕組みで動いています。設定画面で入力する値の意味が分かっていると、申請や実装でつまずきにくくなります。利用者がログインするときの流れは、おおむね次のとおりです。

  1. 利用者が自社サイトのログインボタンを押すと、SNSのログイン・許可画面に移動する
  2. 利用者がSNSにログインし、情報の提供を許可する
  3. SNSが、あらかじめ登録されたコールバックURLに利用者を戻し、認可コードを渡す
  4. 自社のサーバーが、認可コードとクライアントシークレットを使ってSNSからトークンを受け取り、利用者の情報を取得する

設定で登録する値は、それぞれ次の役割を持っています。

値

役割

扱うときの注意

クライアントID

SNSが自社のアプリを識別するための値

SNSごと・環境ごとに発行されるので、どれがどの設定か分かるように管理する

クライアントシークレット

自社のサーバーからのリクエストであることを示す値

サーバー側だけで保管し、ブラウザで動くコードやアプリに含めない

コールバックURL

ログイン後に利用者を戻す自社のURL

登録した値と実際のURLが一致しないとエラーになる

スコープ

SNSから取得する情報の範囲

メールアドレスなど、取得に申請が必要な項目がある

Login Plusでは各SNSとの接続を管理画面の「コネクション」で設定するので、自社サイトはLogin Plusとのやり取りを1つ実装するだけで済みます。

STEP1:要件を決める

実装に入る前に、次の項目を決めておきましょう。後から変えると作り直しになるものばかりです。

対応するSNS、取得する情報、会員の識別方法、既存会員との紐づけの4項目を、実装前に決めることとして並べた図
実装の前に決めておく項目
  1. 対応するSNSは2〜4つに絞る。全部並べると、利用者が前回どれで登録したかを忘れやすくなる(6サービスの比較と組み合わせ方)
  2. メールアドレスや氏名など、取得する情報を決める。取得できる情報はSNSによって違い、申請が必要なものもある(ソーシャルログインで取得できる情報)
  3. 会員の識別には、メールアドレスではなくSNSが発行する固有のIDを使う
  4. 既に会員がいるなら、SNSとの連携をどう追加してもらうかを決める(後述)

パスキーを併用するかどうかも、ここで決めておきます(パスキー導入の進め方)。

STEP2:各SNSへの申請

Login Plusが提供するSNSごとの申請手順書(LINE・Googleの一部抜粋)
Login Plusが提供するSNSごとの申請手順書(LINE・Googleの一部抜粋)

SNSごとに、開発者向けの登録とアプリの作成が必要です。手続きの中身と時間がかかりやすい点を、SNS別にまとめました。

SNS申請で時間がかかりやすい点として、ポリシーのURL、情報取得の申請、Appleの組織登録、最新手順の確認の4点を示した図
申請の前に確認しておくこと

SNS

必要な手続き

時間がかかりやすい点

LINE

LINE Developersでログイン用のチャネルを作成

メールアドレスの取得には申請が必要。友だち追加を最初からオンにして表示するには、認定代理店を通じた申請が必要

Google

Google CloudでOAuth同意画面とOAuthクライアントIDを作成

同意画面にロゴを表示する場合などは、Googleの確認が入る

Apple

Apple Developer Program(有料)に登録し、識別子と鍵を作成

組織として登録する場合はD-U-N-S番号が必要

Yahoo! JAPAN

Yahoo!デベロッパーネットワークでアプリケーションを登録

属性情報の取得には簡易審査が必要

Facebook

Meta for Developersでアプリを作成

公開にはプライバシーポリシーのURLなどが必要。取得する情報によっては審査が入る

X(旧Twitter)

開発者ポータルでアプリを作成

利用条件が変わることがあるため、申請時点の条件を確認する

多くのSNSでは、申請時にプライバシーポリシーと利用規約のURLを求められます。取得した情報の用途を記載し、内容は法務・管理部門に確認してもらいましょう。

管理画面や審査の基準は変わることがあるので、申請の直前に最新の手順を確かめてください。Login Plusでは、契約企業にSNSごとの申請手順書を無償で提供しています。

STEP3:連携の設定

申請が済むと、SNSからクライアントIDとクライアントシークレットが発行されます。Login Plusでは、これらを次の順で登録します。

Login Plusの管理画面でサイトを作成し、コネクションを作成し、クライアントIDとシークレットを設定し、コールバックURLを登録するまでの流れ
Login Plusでの連携設定の順番
  1. 管理画面でサイトを作成する
  2. 「コネクション」から、対応するSNSとの接続を作成する
  3. 各SNSで発行したクライアントIDとクライアントシークレットを設定する
  4. ログイン後に戻ってくる自社のURLを「許可されたコールバックURL」に登録する

管理画面は、申込書を受け取ってから4営業日以内に発行します。コールバックURLは登録した値と1文字でも違うとエラーになるので、本番と検証でURLが異なる場合は両方とも登録しておきましょう。

STEP4:自社サイトへの実装

Login Plusのデータの流れ。番号1・5・6が自社サイト側で実装する部分
Login Plusのデータの流れ。番号1・5・6が自社サイト側で実装する部分

自社サイト側では、ログインボタンの設置から、戻ってきた利用者と自社の会員の照合までを実装します。

ログインボタンの設置から、認可コードの受け取り、利用者情報の取得、固有IDでの会員照合と作成までの処理の流れ
自社サイト側で実装する処理

処理

内容

ログインボタンの設置

リンク先はSNSごとのログインURL。ボタンの見た目は各SNSのデザインガイドラインに従う

ログイン後の受け取り

利用者が戻ってくるURLで、認可コードを受け取る

利用者情報の取得

認可コードを使い、SNSアカウントの情報を取得する(Login Plusでは userinfo API)

会員の照合と作成

SNSアカウントの固有のIDで自社の会員を探し、見つからなければ新しく作成する

照合にメールアドレスを使わないのは、利用者が変更できるうえ、Appleでサインインでは転送用のアドレスが渡されることもあるためです(Appleでサインインの注意点)。

サーバー側からHTTPのリクエストを送れれば、プログラミング言語は問いません。Login Plusでは実装手順書とサンプルコードを提供しています。Googleログインを例にした注意点はGoogleログインの実装手順で解説しています。

STEP5:テストとリリース

管理画面では利用ID数・ログイン数・利用SNSの内訳を確認できる
管理画面では利用ID数・ログイン数・利用SNSの内訳を確認できる

ソーシャルログインの不具合は特定のSNSや環境でだけ起きることが多いので、次の観点で確認しましょう。

観点

確認すること

新規登録と2回目以降

2回目に同じ会員としてログインできるか。新しい会員が作られていないか

複数のSNS

同じ人が別のSNSでログインしたとき、決めたとおりに扱われるか

取得できない情報

メールアドレスの提供を許可しなかった場合や、転送用アドレスの場合に処理が止まらないか

アプリ内ブラウザ

LINEやInstagramなどのアプリ内ブラウザで開いたとき。Googleはアプリ内ブラウザからのログインを制限しているため、案内が必要

キャンセル

SNSの許可画面でキャンセルしたとき、エラー画面で止まらないか

連携の解除

利用者がSNS側で連携を解除した後に、再度ログインしたときの挙動

リリース後もSNS別のログイン数を見て、ほとんど使われていないSNSは外すことも検討しましょう。

既存会員がいるサイトは、SNSとの紐づけ方を先に決める

連携の追加方法を決めておかないと、同じ人が新しい会員として登録されてしまいます。

既存会員がいるサイトで、ログイン中に連携してもらう、メールアドレスの一致で自動統合しない、登録時に既存会員の可能性を案内する、の3点を示した図
既存会員とSNSを紐づけるときの注意
  1. ログイン中の会員に連携してもらう。マイページに「LINEと連携する」などのボタンを置けば、本人確認が済んだ状態で紐づけられる
  2. メールアドレスが一致するだけで自動的に統合しない。第三者が同じアドレスでSNSアカウントを作っていると、他人の会員情報にログインされる恐れがある
  3. 同じメールアドレスの会員がいる場合は、既存の方法でログインしてから連携するよう、登録時に案内する

他社のソーシャルログインから乗り換える場合の手順は、ソーシャルログインの乗り換え手順にまとめています。

導入期間が延びるよくある原因と防ぎ方

原因

防ぎ方

申請を実装の後に始めた

要件が決まった時点で申請に着手する

Appleの開発者登録が組織として進まない

D-U-N-S番号の有無を最初に確認する

LINEの友だち追加の申請を忘れていた

友だち追加を使うなら、申請を最初に始める

プライバシーポリシーの改定が間に合わない

取得する情報が決まった時点で法務・管理部門に相談する

既存会員の扱いが決まっていない

STEP1で決める。テストの段階で発覚すると作り直しになる

本番のコールバックURLを登録していなかった

検証用と本番用のURLを最初に両方登録する

よくある質問

最短でどれくらいで導入できますか?

Login Plusでは最短3週間です。対応するSNSを絞り、申請と実装を並行させるほど短くなります。SNSの審査期間は自社で調整できないので、公開日から逆算して申請を先に始めてください。

ソーシャルログインの設定を始めるには、何を用意すればよいですか?

各SNSの開発者向けアカウント、プライバシーポリシーと利用規約のURL、ログイン後に戻す自社のURL(コールバックURL)です。Appleに組織として登録する場合は、D-U-N-S番号も必要です。LINEでメールアドレスを取得する場合や、Yahoo! JAPANで属性情報を取得する場合は申請や審査があるので、早めに始めましょう。

ログイン後にコールバックURLのエラーが出るのはなぜですか?

登録したコールバックURLと、実際に戻ろうとしたURLが一致していないのがよくある原因です。httpとhttpsの違い、末尾のスラッシュの有無、ポート番号まで一致している必要があります。

開発会社に実装を依頼できますか?

できます。サイトを制作・保守している開発会社に頼むのが一般的です。ただ、SNSへの申請は自社の名義で行うことが多いので、担当者の退職でアカウントにログインできなくなることがないよう、各SNSの管理者アカウントは社内で管理しておきましょう。

パスキーも一緒に導入できますか?

Login Plusはパスキーにも対応しており、ソーシャルログインと同じ実装で併用できます。進め方はパスキー導入の進め方で解説しています。

ソーシャルログインの導入費用はどれくらいですか?

方式によって費用の構造が違うため、月額料金だけでなく、実装・申請・保守まで含めた総額で比べてください。詳しくはソーシャルログインの導入費用で解説しています。

Login Plus について

Login Plus のログイン画面。6つのソーシャルログインとパスキーに対応
Login Plus のログイン画面。6つのソーシャルログインとパスキーに対応

Login Plusは、6つのソーシャルログイン(Apple・Facebook・Google・X(旧Twitter)・Yahoo! JAPAN・LINE)とパスキーに1つの実装で対応できるサービスです。

  • 各SNSへの申請手順書を無償で提供
  • 管理画面は申込書の受領から4営業日以内に発行
  • 最短3週間、平均約2か月でリリース
  • 各SNSの仕様変更にはLogin Plus側で対応
  • 管理画面で、利用ID数・ログイン数・利用SNSの内訳を確認

導入のスケジュールや、自社のシステムに組み込めるかのご相談は、資料請求またはお問い合わせからどうぞ。

ソーシャルログイン・パスキーの資料をお送りします

対応SNS・料金・実装の流れ・導入事例をまとめています。
「自社に導入できるか」のご相談も、同じフォームから承ります。

送信をもって個人情報の取り扱いに同意いただいたものとみなします。

個別のご相談は からもどうぞ。

送信をもって個人情報の取り扱いに同意いただいたものとみなします。

送信をもって個人情報の取り扱いに同意いただいたものとみなします。