Oktaを初期設定からReactログインページ実装まで

Oktaを初期設定からログインページ実装まで

Okta　Developerの設定から、React でのサンプルページの実装まで。

OktaのコンソールとCLIが使えるようになるまで

Okta Develop への登録

今ではOkta Developerがあるので、開発者はトライアルの類いは使う必要はないです。
（Okta CLIの okta register からでも登録できそうですが、この記事内では実際に試した手順にて）

1. Home | Okta Developerを開く。
2. 右上の[Sign Up]ボタンを押下、あとは画面に従い登録を進める。
3. 登録したメールアドレスにメールが届くので、 Activate ボタンを押下する。
4. ブラウザで。Oktaの管理者コンソールが開かれる。
5. いったんサインアウトなどした場合は、Home | Okta Developer から右上[Sign in to Okta]ボタンを押下、画面に従いサインインする。

Okta CLI インストール

1. Getting Started | Okta CLIを開く。
2. Installation セクションの内容に従い、 Okta CLI をインストールする

Okta API トークンの取得

Okta CLIに登録するためのトークンを発行する

https://developer.okta.com/docs/guides/create-an-api-token/main/

1. Oktaコンソール、左メニューで[Security]>[API]を選択
2. [Tokens]タブを選択
3. [Create Token] ボタンを押下
4. 名前を任意でつけて、 [Create Token]を桜花
5. Token Valueをコピーして、保存する（トークンの値はこの機会でのみ取得できる）

Okta CLIでのログイン

1. コンソールで okta register を実行
2. 対話で登録。URLは https://{Oktaのコンソール右上のアカウント名をポップアップしてドメイン名をCopy to clipboard}

Okta Org URL: ※URL（e.g. https://dev-12345678.okta.com)
Okta API token: ※Okta API トークン

---

Reactプロジェクトの作成

プロジェクトの作成、開発サーバで実行

okta start react
cd react
yarn
yarn start

動作確認

1. localhost:3000 をブラウザで開き、 Okta-React Sample Project サイトを開く
2. ウェブサイトで Login 押下
3. Okta のログインページに遷移するので、ログインする
4. Okta-React Sample Project サイトに戻る。自分の名前がサイト内に表示される事を確認する。
5. サイトの Profileを開き、IDトークンの情報が見ることができることを確認する

この時点では Messagesページは正しく開けないので、次の手順でリソースサーバを起動する。

リソースサーバのクローンと実行

1. サイトルートに戻り、 Node/Express Resource Server Example を開く。Githubのページが開くので、Readeの手順通りに実行する

git clone https://github.com/okta/samples-nodejs-express-4.git
cd samples-nodejs-express-4/
yarn

1. okta apps コマンドを実行。okta-react-sampleクライアントのIDを取得する。
2. testenv を保存。 ISSUERは https://ドメイン/oauth2/default 、SPA_CLIENT_ID は前述手順のクライアントID

ISSUER=https://ドメイン/oauth2/default
SPA_CLIENT_ID=クライアントID

1. yarn resource-server 実行、 http://localhost:8000/ でjson形式のメッセージが表示されることを確認する
2. Okta-React Sample Project サイトの Messages を開く。メッセージが正常表示されていることを確認する