Auth0 Universal Login,做一個自己的會員註冊、登入功能

Auth0 Universal Login,做一個自己的會員註冊、登入功能

從JWT到Token,再到Auth0

上次在寫那篇〈Firebase Dynamic Links Analytics API 取得短網址分析資料〉時,看見Google用了JWT,身邊的同事最近也有人講用過JWT。查了一下,是Json Web Token,啊~原來最近接的幾個API,要一直用到token就是從這來的。

是,說實話,前端這領域太廣了,也許你/妳早就用JWT很久了,但Augustus確實是最近才知道這玩意兒~

在看JWT說明文件時,就看到右上方標示「Crafted by Auth0」,點進Auth0的網站,才發現他們家有做會員註冊、登入的第三方功能。

覺得有趣,而且免費方案可以支援到7000名會員數,哇塞,手上有7000名會員,出去就可以橫著走了吧~

Auth0免費方案的部份
Auth0免費方案的部份

一時心動,就看了他們這項功能,試著接了一下,覺得厲害,猜想之後有機會用到,怕之後要用時忘了,就決定寫成這一篇。


Universal Login

這篇筆記文會實作一個,用Auth0的Universal Login功能,來進行會員的註冊、登入。

Universal Login,就是註冊、登入框會直接是他們家產出來的,像這樣:

Auth0 Universal Login頁面
Auth0 Universal Login頁面

登入完後,再轉到我們指定的網址。

預設社群登入的部份只有Google,上面截圖的LINE登入是Augustus另外從後台加上去的,本篇也會寫到。

簡單的說,Universal Login就是Auth0統包登入頁的那段,頁面網域的部份,免費方案是Auth0的子網域,如果要客製成自己的網域,就要付費啦~

因為註冊、登入的頁面是Auth0的,因此修改密碼也會是用他們家的,也就是說,會員資料會有一份在他們家,當然,我們可以在使用者註冊後的callback裡,寫一段傳到我們自己的資料庫上,但,他們家的後台是會有一份的,這點請注意。

放個廣告賺點養主機的$$,謝謝

這篇實作出來的頁面,在這裡:

https://letswritetw.github.io/letswrite-auth0-login/

請注意,當你/妳註冊成會員後,就真的會是本站Let’s Write的會員喔。

目前會員…還沒想到要幹麻,應該就是跟之前Line登入那篇一樣,等Augustus哪天設計完電子報後,有了新文章就會發一份電子報給會員這樣🤣。

也因為Auth0的登入框,本身就可以用LINE登入了,因此本站側邊的Line登入也會改用Auth0。


Auth0 Universal Login步驟

這邊先整理出需要的步驟。

後台設定部份

  • 註冊Auth0,設定基本資訊
  • 取得domain、client ID
  • 設定登入、登出後,轉址的白名單
  • 設定 Login box的樣式

程式碼部份

  • 製作一個簡單的頁面,包含登入前、登入後
  • 引用或import createAuth0Client
  • 取得Auth0 config
  • 判斷是否登入,登入就取得使用者資訊跟access_token

程式碼部份是用原生JavaScript,原本想用Vue.js的,後來想想原生JavaScript走到哪都能用,而且文件提供的範例也都是原生,就決定是他了。


註冊Auth0,設定基本資訊

進到Auth0的官網:https://auth0.com/

點選右上角的sign up,就會進到註冊頁:

Auth0註冊頁
Auth0註冊頁

其實這個註冊頁的右邊那塊,就會很像是他們Universal Login的內容,提供了輸入帳密的方式,或是直接用社群帳號註冊成會員。

填完帳密,或是選擇了社群的方式,下一步就是要設定自己的網域跟地區:

選擇網域、地區
選擇網域、地區

如果是有付費的方案,就可以在註冊完成後,選擇自己的網域。

註冊的最後一步就是選擇你是公司用或個人用:

選擇公司用或個人用
選擇公司用或個人用

註冊完成,會進到會員的首頁,建議是先到Settings頁面去設定基本的資訊:

點擊Settings
點擊Settings

Settings就是在編輯帳號的基本資訊:

編輯基本資訊
編輯基本資訊

這邊比較疑惑的是最底部的Language這邊,原本以為改成中文後,登入的頁面就會顯示成中文了,但Augustus這邊改完,實際上頁面沒有更著改。

基本資訊設定完,下一步就是取得必要的domain、client ID。


取得domain、client ID

用Auth0的Universal Login,第一步初始化Auth就要抓取domain、client ID,這兩個值要存成一個JSON檔。

要取得這兩個值,首先必須要先建立一組應用程式,首頁上點擊左側或是中間區塊的Applications:

點擊Applications
點擊Applications

進到Applications的頁面,會看見Auth0會預設先開好一個App:

預設的App
預設的App

點進去後,就會看到domain、client ID這兩個值,同時,一些空白的地方我們也可以填一填。

這些空白的地方,其中就有我們設定部份的第三步:

設定登入、登出後,轉址的白名單

如果我們進行登入後要轉去的網址,以及登出後要轉去的網址,沒有寫在App這邊白名單的話,Auth0就會無法讓使用者註冊、登入。

把必要的資訊填一填(點擊看原圖)
把必要的資訊填一填(點擊看原圖)

這邊比較困惑的,是「Application Type」這項,看完文件的說明後,其實也沒完全理解,後來選了Regular web app,說明文件的部份可看這邊:Applications in Auth0

從App的設定頁面中,我們可以找到domain、client ID這兩項,把它存成一個名為「auth_config.json」的檔案,檔案內容會是這樣:

{
  "domain": "這邊是domain的值",
  "clientId": "這邊是client id的值"
}

這個JSON檔案要放在根目錄。另外,這個JSON檔會是公開的,因此如果想加其他東西,不要加私密的資訊。


設定 Login box的樣式

Auth0的Universal Login是走他們的登入頁面,而他們的服務也提供了一些可以客製的項目。

一樣在Auth0的登入後首頁,點選中間第一大塊的customize,或是左側選單的Universal Login:

點選中間第一大塊的customize,或是左側選單的Universal Login
點選中間第一大塊的customize,或是左側選單的Universal Login

Universal Login的頁面,就是在編輯登入頁面。

第一個「Settings」頁籤,可以選擇要的主要樣式、換logo、換色系。

第二個「Login」頁籤,就可以更動程式碼了。這邊Augustus手動更改了語言為中文,如下:

// 原本
var language;

// 改成
var language = 'zh-TW';

這邊的更動,都可以按Preview看結果。

第三個「Password Reset」頁籤,就是更動會員要修改密碼時的頁面,如果要中文化,就是改「dict」底下物件的值。

第四個「Multi-factor Authentication」頁籤就是做二階段驗證的,本篇還沒用到二階段驗證,這先不用。

以上四步都設定完後,接下來就是進入到程式碼的部份了。


製作一個簡單的頁面

預計是製作一個,登入前就放一個登入按鈕,登入後就秀出一張卡片寫著登入者的資訊。

因為版型簡單,而且登入後的資訊用JS寫進頁面裡,所以就都做在一頁上。

比較要注意的是,登入、登出這兩個按鈕,加上了各自的id,主要是拿來觸發click事件用。HTML body的部份如下:

HTML部份完成,接下來新增一支JS的檔案,開始寫JS。


引用或import createAuth0Client

JS一開始要先引用Auth0的JS,可以用ES6 import的方式,也可以直接在頁面上引用CDN。

引用CDN

HTML上直接新增一行:

<script src="https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js"></script>

import

用ES6 import的話,要先用npm安裝:

npm install --save @auth0/auth0-spa-js

接著就可以在JS檔中引用了:

import createAuth0Client from '@auth0/auth0-spa-js';

async polyfill

因為登入部份的JS,需要用到ES7的async,Augustus是用codekit這套編譯器,還需要引用polyfill才能編譯。

async在IE也是不支援的,一樣需要引用polyfill。

async polyfill也可以用import或是CDN的方式。

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script>

import

npm install --save @babel/polyfill
import "@babel/polyfill";

取得Auth0 config

JS一開始要先寫取得Auth0 config的function,fetch我們之前建的auth_config.json,並將auth0初始化。


判斷是否登入,登入就取得資訊

因為使用者是在Auth0的頁面上做註冊、登入的動作,是用Auth0的function來判斷是否登入這段。

使用者登入回來後,網址會帶上code、state這兩個參數,文件中的範例碼有做清掉參數的動作:

if(query.includes("code=") && query.includes("state=")) {
  // 執行登入後的動作
  await auth0.handleRedirectCallback();

  // 清掉網址參數
  window.history.replaceState({}, document.title, pathname);
 }

看說明文件,auth0.handleRedirectCallback()是可以跟後端要回token回來。實際在寫的時候,原本以為不用這行,但一刪除,就會發現使用者確實登入了,但JS卻判定使用者尚未登入,因此還是寫了上去。

要判斷使用者是否登入,用這個function:

await auth0.isAuthenticated();

登入會回傳 true,未登入回傳 false

使用者登入後,可以取得access_token、userProfile:

// 取得 access_token
let accessToken = await auth0.getTokenSilently(); 

// 取得登入者資訊
const user = await auth0.getUser();

最後是要寫按下登入、登出按鈕的function,主要就是執行轉址。

這一段的程式碼整理如下:

完整的程式碼有放在Github上,本篇的文未會附上網址。


加入LINE登入

Auth0在社群登入的部份,除了預設有的Google,還可以加上其他社群登入。

在Auth0的首頁,按下左側選單的「Connections」,再點它第二層的「Social」:

點擊Social
點擊Social

進到Social頁面後,就會看到可以連接的社群登入列表,很洋洋灑灑的的大串:

Auth0社群登入列表
Auth0社群登入列表

因為Augustus已經接通了LINE,因此LINE是打開的狀態。

大部份的社群登入,都要輸入client id,所以這邊Auth0預設只開了Google。

LINE登入一樣要取得channel id、channel secret,取得的方式請看這篇:

寫一個LINE登入功能:上篇 – 前置作業

取得id跟secret後,點擊列表中的Line,就會出現一個燈箱:

填寫channel id、channel secret
填寫channel id、channel secret

按下SAVE後,登入頁就會加上LINE登入的按鈕,但還要再做一個步驟才能執行。

這一步就是LINE Developers要加上callback URL,URL的白名單要加入Auth0。

進到LINE Developers的後台,我們建立的App,在callback URL那邊要新增這行:

https://你的網域.auth0.com/login/callback

「你的網域.auth0.com」這邊就是填上我們在Auth0取得的domain。

加入URL
加入URL

因為Augustus的頁面是用Github Pages,因此把頁面的網址也加了進去。

以上完成後,就可以執行LINE註冊、登入。


Auth0後台看會員狀況

當有會員註冊、登入,Auth0的後台可以看到。

點選首頁左側選單的Users & Roles,再點第二層的Users:

點Users
點Users

會看見會員的列表,包含是用什麼方式註冊、登入次數、最後登入時間。

會員列表
會員列表

如果再點擊每一位會員進去,可以再看到註冊時間、用什麼瀏覽器註冊、可以擁有什麼權限…等,這邊屬於比較多的個人資訊,就不截圖了。


Let’s Write加入會員頁、原始檔

歡迎大家加入Let’s Write會員,目前只想到以後可以收到最新文章的電子報…就這樣XD,所以是免費加入的呀~

會員從這加:

https://letswritetw.github.io/letswrite-auth0-login/

本篇的原始檔也放在Github上了:

https://github.com/letswritetw/letswrite-auth0-login

Summary
Auth0 Universal Login,做一個自己的會員註冊、登入功能
Article Name
Auth0 Universal Login,做一個自己的會員註冊、登入功能
Description
本篇大綱:Auth0 Universal Login步驟。註冊Auth0,設定基本資訊。取得domain、client ID。設定 Login box的樣式。引用createAuth0Client。取得Auth0 config。判斷是否登入,登入就取得資訊。加入LINE登入。Auth0後台看會員狀況
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言