Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

image1.png

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

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

image7.png

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
oauth90_create_user.png

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

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

image2.png

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

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

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

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

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

だいたい90秒くらいで出来たでしょうか?

(2017.10.12 訂正)
コードスニペットを試すには、以下のリンク先をご利用ください。
https://jsfiddle.net/ringcaptcha/9b9enpwe/4/

コードスニペットを試すには、oauth.io APIキーをコピーしてhttp://oauth-io.github.io/oauth-js/ にアクセスし、APIキーをスニペットに貼り付け、‘Connect with XXXX’ をクリックします。
image5.png

より詳しい説明はこちらをご確認下さい。: http://oauth-io.github.io/oauth-js/

各種質問はこちら: support@oauth.io

補足

Step 1: https://www.instagram.com/developer/. へアクセスし、 ‘Sign up’ を選択
image17.png

Step 2: 確認メールを受信し、承認します。
image19.png

Step 3: 2までの手順を経て、ログインできるようになります。右上の‘Manage Clients’ を選択。

image8.png

Step 4: ‘Manage Clients’内のダッシュボードから、 ‘Register a New Client’ を選択する
image9.png

Step 5: Instagram Appの詳細を記入します。 ‘Valid Redirect URL’ をしっかり記入し、エンターキーを必ず押してください
image3.png

Step 6: ‘Security’タブを選択し、 ‘Disable implicit OAuth’のチェックを外します。そうすることで、clientサイドでJavascriptスニペットが利用できるようになります。

image18.png

Step 7: ‘Register’ を選択するとInstagram Appの作成が完了します。 ‘Manage Clients’ をダッシュボードから確認でき、右上の‘Manage’を選択するこで管理画面へ遷移できます。
image10.png

Step 8: oauth.ioで必要な‘Client ID’ と ‘Client Secret’を設定することができます
oauth90_manage.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした