3
0

More than 3 years have passed since last update.

Auth0+ファイル1つでローカルサイトにログイン機能を付ける!

Last updated at Posted at 2020-01-06

小さいな1歩から始めることにしました。

前回、超初心者がログイン機能のついたサイトのデスクトップアプリ化に挑戦(あんど失敗・・)でAuth0で認証を付けた自分のサイトをエレクトロン化するとログイン機能が消えるという問題にぶつかりました。
色々悩みましたが、Auth0が提供してくれるサンプルファイルは多くあって、複雑すぎて何が間違っているかさっぱり見当がつきません・・(涙)。
そんな時、「ファイル一つコピペで試すAuth0+Vue.jsのログインサンプル」という記事を読んだので、コードを参考にしながら単純なファイルを用いて、ローカルサイトに認証(Line限定)を付けてみることにしました。
image.png

環境

Windows 10
Node.js v12.4.0
Visual Studio Code version 1.41
Live Server 5.6.0

方法

Step1. 好きな名前のフォルダを作ったらVisual Studio Codeを立ち上げます。
Step2. Visual Studio CodeでLive Serverをダウンロードします。
Step3. 「ファイル一つコピペで試すAuth0+Vue.jsのログインサンプル」を参考に、
    Index.htmlファイルを作成します。
Step4. Visual Studio Code右下の「Go Live」をクリック、
どこにつながるか確認しておきます。念のため、一旦Go liveは終了。
image.png
Step5. Auth0で認証用のアプリを作成します。(コチラの方法1~3)
Step.6 Auth0のApplication SettingsにてAllowed Callback URLs、
    Allowed Web Origins、Allowed Logout URLsをStep4で確かめた
    ローカルサイトに変更し、Saveします。
Step7. Auth0のDomain及びClint IDをIndex.htmlの該当箇所にコピーします。
Step8. 再度、「Go live」をクリックし、ローカルサイトで認証機能が付くか確認。

結果

あ~、できた!!
【トップ画面】
image.png

【ログイン画面】
image.png

【ログイン後】
<img width="400" alt="image.png" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508834/67ec4f53-f304-6155-3cc2-b882f3755b50.png)

感想

またもやQiita&先人の知恵に助けられました。
数週間悩んで体感したことは複雑なコードはレベルの高いことが初心者でもチャレンジできるが、逆に壁にぶち当たるとほぼ何もできないこと。
私でも構造が理解できるこの方法で次はエレクトロン化に挑戦したいと思います。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0