React tutorial(Authentication) Part2
Jul 22, 2017 · 7 min read
前回のチュートリアルの続きになります。
今回は、Authentication(認証機能) を付けていきます。
- まず、Auth0アカウントにサインアップします。
Auth0を使用して、JSON Webトークン(JWT)を発行できます。 - Auth0管理ダッシュボードにログインし、新しいAPIクライアントを作成します。 指示通りに進めるとて
まず、以下のパッケージをインストールします。
とても親切な導入方法のページに向かうので、domain, audience等を自分のものに置き換られているので、書いてあるコード、そのまま使えます。
後は各ファイルに以下のコードを書き込みます。
utils/AuthService.js:
import decode from 'jwt-decode';
import { browserHistory } from 'react-router';
import auth0 from 'auth0-js';
const ID_TOKEN_KEY = 'id_token';
const ACCESS_TOKEN_KEY = 'access_token';const CLIENT_ID = '{AUTH0_CLIENT_ID}';
const CLIENT_DOMAIN = 'AUTH0_DOMAIN';
const REDIRECT = 'YOUR_CALLBACK_URL';
const SCOPE = 'YOUR_SCOPE';
const AUDIENCE = 'AUDIENCE_ATTRIBUTE';var auth = new auth0.WebAuth({
clientID: CLIENT_ID,
domain: CLIENT_DOMAIN
});export function login() {
auth.authorize({
responseType: 'token id_token',
redirectUri: REDIRECT,
audience: AUDIENCE,
scope: SCOPE
});
}export function logout() {
clearIdToken();
clearAccessToken();
browserHistory.push('/');
}export function requireAuth(nextState, replace) {
if (!isLoggedIn()) {
replace({pathname: '/'});
}
}export function getIdToken() {
return localStorage.getItem(ID_TOKEN_KEY);
}export function getAccessToken() {
return localStorage.getItem(ACCESS_TOKEN_KEY);
}function clearIdToken() {
localStorage.removeItem(ID_TOKEN_KEY);
}function clearAccessToken() {
localStorage.removeItem(ACCESS_TOKEN_KEY);
}// Helper function that will allow us to extract the access_token and id_token
function getParameterByName(name) {
let match = RegExp('[#&]' + name + '=([^&]*)').exec(window.location.hash);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}// Get and store access_token in local storage
export function setAccessToken() {
let accessToken = getParameterByName('access_token');
localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
}// Get and store id_token in local storage
export function setIdToken() {
let idToken = getParameterByName('id_token');
localStorage.setItem(ID_TOKEN_KEY, idToken);
}export function isLoggedIn() {
const idToken = getIdToken();
return !!idToken && !isTokenExpired(idToken);
}function getTokenExpirationDate(encodedToken) {
const token = decode(encodedToken);
if (!token.exp) { return null; }const date = new Date(0);
date.setUTCSeconds(token.exp);return date;
}function isTokenExpired(token) {
const expirationDate = getTokenExpirationDate(token);
return expirationDate < new Date();
}
上のコードの各種変数は、authログイン、サインアップ時に与えらた値をいれます。
また、各コンポーネントにもrender内にloginしている場合はこの表示、していない場合はこの表示のように、分岐処理を加えます。
次に、Callbackコンポーネントを加えます。
component/Callback.jsファイルを作成し、以下のコードを打ちます。
import {Component} from 'react';
import {setIdToken, setAccessToken} from '../utils/AuthService';class Callback extends Component {
componentDidMount() {
setAccessToken();
setIdToken();
window.location.href='/';
}render() {
return null;
}
}export default Callback;
- ユーザーが認証されると、Auth0はアプリケーションにリダイレクトしてcallbackルートを呼び出します。
- Callbackコンポーネントは、callbackルートが呼び出されたときにアクティブになります。
- 上記の処理が経て、id_tokenとaccess_tokenをCallbackコンポーネントが設定し終えたら、通常ページにリダイレクトされ、ログイン状態になります。
今回は、stateを用いたデータ格納ではないので、コンポーネント内でconstructorを用いる必要はありません。
まとめ
今回の手順で、Callbackコンポーネントを加えるというのがありました。
これは、認証などで認証した後に戻ってくるURLページということになります。
まだ自分でAPIを作ったことがないためか、いまいちAPI処理の流れが曖昧であるなと、何度かこのチュートリアルで感じました。
