【ALIS】OAuth認証のサンプルコード（ZEIT Now,Node.js）

ゆうき
2019/06/14 11:10

リンク：

アリスブログ ＞ OAuth認証の説明まとめ ＞当記事

◆ 【ALIS】OAuth認証のサンプルコード（ZEIT Now,Node.js）

Githubの方に置いてあります。

（こちらのコードは、とある方から許可を頂いた上で、バックアップ用としてフォークを行っています）

READMEに書かれていることを一通りこなせば「ALISのOAuth認証の一連の流れ」をWebから確認することができます。

○ 留意事項

・筆者の「ゆうき」は「へっぽこハッカー」です。サーバーサイドの知識は全然ないので、説明に間違いがあるかもしれません。予めご了承下さい

○ 関連記事

・その１

・その２

○ 必要な環境等

・「Node.js」が動かせるサーバー

・「npm」コマンドの知識

・「git」のインストール（任意）

○ READMEについて軽く説明

Read this article first. -> https://alisproject.github.io/oauth2/

ALISのOAuthに関する公式ドキュメントです。

一通り読んでおくことを推奨。

Create Now account => https://zeit.co/now

ALISのOAuth認証を行うにあたって、ここではサーバーレスの「ZEIT Now」を利用しています。

サーバーレスとは言うものの、「ZEIT Now」には「AWS何それ美味しいの？」といったへっぽこハッカーの私でも１時間以内に環境構築ができてしまうぐらいの簡単さがあります。

レンタルサーバーで「Node.js」の環境構築を行うと、「ssh」とか「Linuxコマンド」とか「サーバーの仕様」とかにぶつかって厄介ですが、「ZEIT Now」は、あら簡単！

　CLIに「Now」と入れるだけでデプロイできます。驚きの便利さです。

（スーパーハッカーの億ラビットくんも称賛しております！）

ということで、「ZEIT Now」を使ったことがない方は、是非使ってみて下さい！

基本無料です。

なお、Githubの認証とかで登録完了すると、メインのアドレスがメールアドレスの記号になってしまいますが、こちらは「ZEIT Nowのメインページ」→「設定」から変更可能です。

And install now command
$ git clone https://github.com/yuuki100/alis-oauth-sample.git
$ cd alis-oauth-sample
$ yarn
$ now secret add client-id "your-alis-client-id"
$ now secret add client-secret "your-alis-client-secret"
$ now secret add redirect-uri "your-alis-redirect-uri"
$ now secret add cook-key "your-cook-key"

続いて、ローカルにおけるCLIの操作。

（Windowsの場合はコマンドプロンプト）

「git clone」は「Github」に置かれているリポジトリを、ローカルにダウンロードするコマンドです。

（gitを入れていない方は「https://github.com/yuuki100/alis-oauth-sample」から直接ダウンロードして下さい）

「cd alis-oauth-sample」は「alis-oauth-sample」フォルダに移動ですね。

場合によっては「alis-oauth-sample」の置かれているパスが違ったりするので、「cd ○○」で「alis-oauth-sample」が置かれているフォルダに移動しましょう！

「yarn」は「package.json」に書かれている情報から「Node.js」関連のファイルをダウンロードするコマンド……だったような。

私は「npm i」で済ませてしまったので、あまり良くわかりませんが、とりあえず、その類のコマンドでローカルフォルダに「node_modules」を用意します。

「now secret」は「ZEIT Now」の環境変数の設定です。

「"your-alis-client-id"」「"your-alis-client-secret"」「"your-alis-redirect-uri"」の３つは、ALISの「登録中のアプリケーション」で「登録した後に表示されるもの」に変換。

「"your-cook-key"」は、そのままで問題ありません。

※ 「now secret」の「特定の変数」の上書きはできません（一例として「now secret add client-id "your-alis-client-id"」を２回入力するとエラーになります）。

誤った値を入れた場合は「now secret help」（もしくは「now help」）で削除コマンドを確認して、設定した変数を削除しましょう

Deploy
Edit "alias": "alis-oauth-sample.now.sh" inside the now.json file to your preferred URL before deploying it.
$ now .

ちょっとスキップして、一番下の説明。

「now.json」（nowの環境設定のファイル）内部の途中に書かれている

"alias": "alis-oauth-test",

は、「ZEIT Now」に登録した「自身のURL」に修正しておきます。

この後に「now」を入力すると、ローカルフォルダに用意したものが「ZEIT Now」にデプロイされて、ALISのOAuth認証のサンプルコードの動く様子を「ZEIT Now」から確認することができます。

Local Development
$ mv .env.sample .env
$ vi .env # edit environment variables
$ now dev .

こちらはローカル環境からの実行方法。

「now」で毎回デプロイしていると、時間がかかったり、「月１０００回」の制限に引っかかったりするので、サンプルソースの改造とかをしたい場合はローカル環境での実行をオススメします。

なお、ローカルで確認する場合は、「ALISのアプリケーションの登録」のリダイレクトURLに「http://localhost:3000/api/callback.js」を追加しておいて下さい。

また、ローカル環境では「now secret」が反映されていないので「.env」ファイルを「alis-oauth-sample」の中に作成する必要があります。

「.env」ファイルの中身（テキストエディタで編集）

# KEY=VALUE 形式

CLIENT_ID="your-alis-client-id"
CLIENT_SECRET="your-alis-client-secret"
REDIRECT_URI="http://localhost:3000/api/callback.js"
COOK_KEY="your-cook-key"

（「"your-alis-client-id"」「"your-alis-client-secret"」は任意のものに変換）

この設定の後に「now dev」をすると「http://localhost:3000/」で同様の動作を確認できます。

以上です。

「他の環境」や「他の言語」で再構築すると、ミスしたときによくわからなくなってしまうことがあるので、（環境構築に自信がないなら）最初は「ZEIT Now」でお試ししてみるのが良いかもしれませんね。

(´∀｀)

「OAuth認証の説明まとめ」に戻る