More than 5 years have passed since last update.

ソーシャルログイン’ を90秒で導入する方法 / OAuth認証

Last updated at 2019-05-23Posted at 2017-09-11

TLDR: oauth.ioというSNSアカウント等を用いたOAuth認証を簡単に導入できるツールの使い方を説明します。

SNSのアカウントを利用して会員登録するWEBサービスはたくさんあります。ユーザー登録の際に必要な情報を入力するという手間を排除することで、高いユーザーの登録率が期待できます。また、新規会員の友達関係、趣味、よく訪問する場所などの属性情報等を最初から獲得できます。

このようなソーシャルログインの機能は、OAuth認証 (オースと読む、現在はバージョン2）と呼ばれています。ただ、仕組みは簡単ではありません。（下図参考）

Courtesy of: https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2

OAuth認証を用いて、SNSで簡単にログインできる導線を作るために、単調な手順を各種連携アカウントに対して繰返し行う必要があります。また、Facebook、Twitter、Instagramが利用するようなOAuth2の仕様は、やや独自仕様になっている傾向があります。このような手間をoauth.ioを使うことで、簡単にSNSを用いた登録ボタンを作成できます。

oauth.ioは既に170以上のOAuth2アイデンティティプロバイダの特質を把握しており、直ぐに各種対応したいSNSの登録ボタンを作成することができるようになります。

Step 1: 好きなアイデンティティプロバイダを利用してアカウントを作成します。
https://oauth.io/signup

Step 2: ダッシュボードにて、画面左側にある ‘Integrated APIs’を選択します。

Step 3: ここから連携したいサービスを選択します（サンプルでInstagramを使ってみます）

Step 4: Create ⇒ integrate ⇒ ‘Instagram’ アプリの手順で進めます
　a. ‘Instagram’ appの作り方の説明を読む (ページ下部の補足で詳細説明)
　b. OAuth認証から求められるリクエストは何処にあるのかを確認する
(ページ下部補足の最後の方を確認)
　c. bの手順で得た情報をコピー＆ペーストする
　d. ‘Save Changes’をクリックする

Step 5: 青色の ‘Try Auth’ ボタンを選択します。

Step 6: InstagramのユーザーIDとパスワードを入力します。

Step 7: Instagramのパーミッション認証ページが表示されます。

Step 8: ログインに成功し、必要なパーミッションを認証した場合：
　a. oauth.ioのAPI Keyが発行されます; このKeyにより、oauth.ioで設定したすべての連携先にアクセスできます
　b. コードスニペットをコピーし、”Instagramを使って登録”ボタンを設置したい場所にペーストします。
　c. Instagramからのレスポンスが確認できます。
　d. レスポンスで取得した Javascript オブジェクトの詳細な利用方法です。