OAuth認証 + React.jsを使ってソーシャルログインボタンを導入する！

##ゼロからソーシャルログインボタンを簡単（＜50行コード）React.jsで導入する方法
OAuth認証を簡単にしてくれる[OAuth.io](https://oauth.io/?utm_source=qiita&utm_campaign=UseReactjs&utm_medium=article)を使用します。OAuth.ioは、１７０以上のOAuth2.0アイデンティティプロバイダ（Facebook,Twitter,Google,Linkedinなど ）の特質を把握しており、直ぐに各種対応したいSNSの登録ボタンを作成することが出来ます。ドキュメントとSDK(ソフトウェア開発キット)もJavaScript, NodeJS, PHP, iOS, Android向けに用意されています。

今回の記事では、'Github'を例として説明します。

<img width="400" alt="Github_outcome.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/b66860a3-480a-d869-e37a-a3787bb0cdf8.png">

上記のボタンをあなたのサービスのログインページに導入する事により、
ユーザーネームとパスワードのログインの他にGithubアカウントでのログインを追加する事が出来ます。
今では多くのサービスが、このようなSNSアカウントによるログインを導入しています。

こちらからボタン動作を確認できます。
https://jsfiddle.net/4cztpg16/2/

導入までのSteps

1. React app 作成
1. 必要な外部ソースをReact appに取得
1. OAuth.io を React app に追加
1. Github appを作成
1. OAuth.ioのアカウントを作成
1. OAuth.ioアカウントとリンクさせる

###Step1.　React App作成

最初にベースとなる、シングルページのReactアプリを作成します。
__create-react-app__ライブラリーを使用します。
React.jsのドキュメントはこちらになります。
https://reactjs.org/docs/add-react-to-a-new-app.html 

* まず、yarnをインストールします。

```
// For macOS
$ brew install yarn
```


* 既にReactアプリをお持ちの方は、Step2.へ進んでください。

```
$ npm install -g create-react-app
$ create-react-app github-login-demo


$ cd github-login-demo
$ yarn start 
```

###Step2.  外部ソースをReact Appに追加

'Github login button'をデザインするために、[bootstrap-social ](https://lipis.github.io/bootstrap-social/)ライブリーを使用します。
このライブラリーは、多くのソーシャルボタンのbootstrap、[Font Awesome](https://fontawesome.com/)、のCSSを含んでいるので、簡単にソーシャルボタンを表示出来ます。

```
$ yarn add bootstrap-social
```

###Step3. React AppにOAuth.io を導入する

* App.jsに下記のコードを記述して、'Sign in with Github' ボタンを表示させる。
* 'YOUR_OAUTH_API_KEY'をStep５.OAuth.ioアカウント作成時に表示されるAPIkeyに置き換えて下さい。

```javascript
:App.js
import React, { Component } from 'react';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-social/bootstrap-social.css';

class App extends Component {

  // oauth.jsをCDNからダウンロードする。（外部のスクリプトを追加するのと同じように出来ます。）
  componentDidMount () {
    const oauthScript = document.createElement("script");
    oauthScript.src = "https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js";

    document.body.appendChild(oauthScript);
  }

  handleClick(e) {
    // ページのリロードを防止する。
    e.preventDefault();

    //　　API keyを使ってOAuth.ioを初期化する。
    // OAuth.io登録後にメモした、あなたのAPIkeyを'YOUR_OAUTH_API_KEY'に記入します。
    window.OAuth.initialize('YOUR_OAUTH_API_KEY');

    // ポップアップウインドウを表示し、Githubの承認する。
    window.OAuth.popup('github').then((provider) => {

      // 'welcome'メッセージをユーザの名前と一緒に表示する。
      // 取得したユーザーのデータをコンソールで確認する。
      provider.me().then((data) => {
        console.log("data: ", data);
        alert("Welcome " + data.name + "!");
      });
      
      // また、.get()にてGithub's APIから取得も出来ます。
      provider.get('/user').then((data) => {
         console.log('self data:', data);
      });

    });
  }

  render() {
    return <a href="" onClick={this.handleClick.bind(this)} className="btn btn-social btn-github">
             <span className="fa fa-github"></span> Sign in with Github
           </a>;
  }
}

export default App;

```

まだ、OAuth.ioはnpmJSに対応していない為、componentDidMount()functionを使用してCDNファイルを読み込んでいます。
Webpackを使用している場合は、([external](https://webpack.js.org/configuration/externals/))でも代用出来ます。

* プログラムを実行しましょう

```
$ yarn start
```


###Step4. Github appを作成し、OAuth.ioアカウントとリンクさせる

* こちらから、簡単にGithubデベロッパー用のOAuth appが作成出来ます。
'https://github.com/settings/applications/new'

* Authorization callback URLには、'https://oauth.io/auth' と記入して下さい。

* 全て記入したら'Register Application'をクリック
<img width="798" alt="Github_app_setting.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/6e942620-c8a7-e6f5-b333-d352c8bd02f5.png">

アプリが無事登録されました。

* 表示されているClient ID','Client Secret'をメモします。

<img width="845" alt="Github_clientId_clientSecret.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/cfcd0ae0-771c-16d7-0ce2-5a28a9c7c91c.png">

###Step5. OAuth.io のアカウントを作成し、API keyを取得

* これからのステップを動画で確認
 
![Github_link_to_OAuthio.gif](https://qiita-image-store.s3.amazonaws.com/0/192668/f4f1ff6c-eede-5175-1ced-12df1dabcd3c.gif)

* OAuth.ioのアカウント作成 [https://oauth.io/signup](https://oauth.io/signup?utm_source=qiita&utm_campaign=UseReactjs&utm_medium=article)
 
<img width="634" alt="oauthio_signup.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/01eaa14f-8713-b5f7-0aee-3e9d6d5a3bd8.png">

* サインアップ後、メインダッシュボードが表示されます。
* AppkeyのPublic KeyをStep3.App.jsの'YOUR_OAUTH_API_KEY'に記入する
<img width="1436" alt="oauthio_your_apikye.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/a099399e-66cb-c8a5-a927-0f8543eacc76.png">

* 画面左側の”Integrated APIs ”をクリック

<img width="1344" alt="oauthio_general.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/556fe865-78d9-da30-264a-198d0d4ebeea.png">

* Integrated APIsの画面右側に表示される'+Add APIs'をクリック
<img width="1350" alt="oauthio_api_integration.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/668ddaa0-ecfe-57b8-ae41-8df9e53a3e8a.png">

 'Add a provider to your app'利用可能なサービスが表示されます。

* 'Github'をクリック
<img width="594" alt="oauthio_provider_list.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/da5a6759-7f75-f876-63e7-bf4dbf058534.png">

* Githubでメモした、'Client ID','Client Secret'を'client_id','client_secret'それぞれへ記入します。
* 'scope'には'user'と記入します。
* 記入し終わったら”Save changes”をクリック

<img width="1431" alt="oauth_link_to_github.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/d721fd0a-5cc3-adfe-cbfb-45513604f982.png">

* 'Try Auth'ボタンをクリック
<img width="1431" alt="oauthio_github_tryauth.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/a1a4e695-b92c-0731-e116-12d977eb4c52.png">

Githubの認証画面に飛びます。

* 'Authorize'をクリックして、許可を与えます。

<img width="408" alt="github_autorize.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/b22f4999-6a13-ec9c-3753-891ebdb0cf8a.png">


Githubとの連携が成功すると、下記ポップアップが表示されます。
　a. oauth.ioのAPI Keyが発行されます; このKeyにより、oauth.ioで設定したすべての連携先にアクセスできます
　b. コードスニペットをコピーし、”Githubを使って登録”ボタンを設置したい場所にペーストします。
　c. Github からのレスポンスが確認できます。
　d. レスポンスで取得した Javascript オブジェクトの詳細な利用方法です。
<img width="423" alt="oauthio_github_success.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/12a0b3f7-b296-69f7-c021-c5ef073efb41.png">


たったこれだけで、Github ログインボタンをあなたのサービスに導入できました。

今回の記事はフロントエンド部分だけの説明でした。今のままでは、バックエンドはフロントエンドが何をしているのかわかりません。なので、バックエンドのコントローラーにコードを追加しなければなりません。こちらから([SDK](https://github.com/oauth-io))のドキュメントを確認できます。