React tutorial(Authentication) Part2

Tuyoshi Akiyama
Jul 22, 2017 · 7 min read

前回のチュートリアルの続きになります。

今回は、Authentication(認証機能) を付けていきます。

  1. まず、Auth0アカウントにサインアップします。
    Auth0を使用して、JSON Webトークン(JWT)を発行できます。
  2. 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処理の流れが曖昧であるなと、何度かこのチュートリアルで感じました。

Tuyoshi Akiyama

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade