Oktaを初期設定からログインページ実装まで
Okta Developerの設定から、React でのサンプルページの実装まで。
OktaのコンソールとCLIが使えるようになるまで
Okta Develop への登録
今ではOkta Developerがあるので、開発者はトライアルの類いは使う必要はないです。
（Okta CLIの okta register からでも登録できそうですが、この記事内では実際に試した手順にて）
- Home | Okta Developerを開く。
- 右上の[Sign Up]ボタンを押下、あとは画面に従い登録を進める。
- 登録したメールアドレスにメールが届くので、 Activate ボタンを押下する。
- ブラウザで。Oktaの管理者コンソールが開かれる。
- いったんサインアウトなどした場合は、Home | Okta Developer から右上[Sign in to Okta]ボタンを押下、画面に従いサインインする。
Okta CLI インストール
- Getting Started | Okta CLIを開く。
- Installation セクションの内容に従い、 Okta CLI をインストールする
Okta API トークンの取得
Okta CLIに登録するためのトークンを発行する
https://developer.okta.com/docs/guides/create-an-api-token/main/
- Oktaコンソール、左メニューで[Security]>[API]を選択
- [Tokens]タブを選択
- [Create Token] ボタンを押下
- 名前を任意でつけて、 [Create Token]を桜花
- Token Valueをコピーして、保存する（トークンの値はこの機会でのみ取得できる）
Okta CLIでのログイン
- コンソールで
okta registerを実行 - 対話で登録。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
動作確認
- localhost:3000 をブラウザで開き、 Okta-React Sample Project サイトを開く
- ウェブサイトで Login 押下
- Okta のログインページに遷移するので、ログインする
- Okta-React Sample Project サイトに戻る。自分の名前がサイト内に表示される事を確認する。
- サイトの Profileを開き、IDトークンの情報が見ることができることを確認する
この時点では Messagesページは正しく開けないので、次の手順でリソースサーバを起動する。
リソースサーバのクローンと実行
- サイトルートに戻り、 Node/Express Resource Server Example を開く。Githubのページが開くので、Readeの手順通りに実行する
git clone https://github.com/okta/samples-nodejs-express-4.git
cd samples-nodejs-express-4/
yarn
-
okta appsコマンドを実行。okta-react-sampleクライアントのIDを取得する。 - testenv を保存。 ISSUERは https://ドメイン/oauth2/default 、SPA_CLIENT_ID は前述手順のクライアントID
ISSUER=https://ドメイン/oauth2/default
SPA_CLIENT_ID=クライアントID
- yarn resource-server 実行、 http://localhost:8000/ でjson形式のメッセージが表示されることを確認する
- Okta-React Sample Project サイトの Messages を開く。メッセージが正常表示されていることを確認する