ゼロからソーシャルログインボタンを簡単（＜50行コード）React.jsで導入する方法
OAuth認証を簡単にしてくれるOAuth.ioを使用します。OAuth.ioは、１７０以上のOAuth2.0アイデンティティプロバイダ（Facebook,Twitter,Google,Linkedinなど ）の特質を把握しており、直ぐに各種対応したいSNSの登録ボタンを作成することが出来ます。ドキュメントとSDK(ソフトウェア開発キット)もJavaScript, NodeJS, PHP, iOS, Android向けに用意されています。
今回の記事では、'Github'を例として説明します。
上記のボタンをあなたのサービスのログインページに導入する事により、
ユーザーネームとパスワードのログインの他にGithubアカウントでのログインを追加する事が出来ます。
今では多くのサービスが、このようなSNSアカウントによるログインを導入しています。
こちらからボタン動作を確認できます。
https://jsfiddle.net/4cztpg16/2/
導入までのSteps
- React app 作成
- 必要な外部ソースをReact appに取得
- OAuth.io を React app に追加
- Github appを作成
- OAuth.ioのアカウントを作成
- 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 ライブリーを使用します。
このライブラリーは、多くのソーシャルボタンのbootstrap、Font Awesome、のCSSを含んでいるので、簡単にソーシャルボタンを表示出来ます。
$ yarn add bootstrap-social
Step3. React AppにOAuth.io を導入する
- App.jsに下記のコードを記述して、'Sign in with Github' ボタンを表示させる。
- 'YOUR_OAUTH_API_KEY'をStep５.OAuth.ioアカウント作成時に表示されるAPIkeyに置き換えて下さい。
: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)でも代用出来ます。
- プログラムを実行しましょう
$ 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'をクリック
アプリが無事登録されました。
- 表示されているClient ID','Client Secret'をメモします。
Step5. OAuth.io のアカウントを作成し、API keyを取得
- これからのステップを動画で確認
- OAuth.ioのアカウント作成 https://oauth.io/signup
- サインアップ後、メインダッシュボードが表示されます。
AppkeyのPublic KeyをStep3.App.jsの'YOUR_OAUTH_API_KEY'に記入する
画面左側の”Integrated APIs ”をクリック
- Integrated APIsの画面右側に表示される'+Add APIs'をクリック
'Add a provider to your app'利用可能なサービスが表示されます。
'Github'をクリック
Githubでメモした、'Client ID','Client Secret'を'client_id','client_secret'それぞれへ記入します。
'scope'には'user'と記入します。
記入し終わったら”Save changes”をクリック
- 'Try Auth'ボタンをクリック
Githubの認証画面に飛びます。
- 'Authorize'をクリックして、許可を与えます。
Githubとの連携が成功すると、下記ポップアップが表示されます。
a. oauth.ioのAPI Keyが発行されます; このKeyにより、oauth.ioで設定したすべての連携先にアクセスできます
b. コードスニペットをコピーし、”Githubを使って登録”ボタンを設置したい場所にペーストします。
c. Github からのレスポンスが確認できます。
d. レスポンスで取得した Javascript オブジェクトの詳細な利用方法です。
たったこれだけで、Github ログインボタンをあなたのサービスに導入できました。
今回の記事はフロントエンド部分だけの説明でした。今のままでは、バックエンドはフロントエンドが何をしているのかわかりません。なので、バックエンドのコントローラーにコードを追加しなければなりません。こちらから(SDK)のドキュメントを確認できます。