用Auth0在WordPress上做會員註冊、登入功能

用Auth0在WordPress上做會員註冊、登入功能

自己的會員功能自己寫

在上一篇〈Auth0 Universal Login,做一個自己的會員註冊、登入功能〉中,寫了一個靜態頁面來接Auth0的universal login。後來想想,如果要使用者從Let’s Write本站先到靜態頁,再從靜態頁進Universal Login的頁面,中間多了一步,容易造成使用者的疑惑跟跳出率增加。另外,登入後的個人資訊也無法呈現在本站上,因此決定花一點時間,把Auth0的會員註冊、登入功能直接搬到本站來。

Auth0在WordPress上有外掛,有試用了一下,但不知道為何小工具那塊一直是空白,而且它的設定值,登入後就一定要轉到指定的頁面,無法回到點擊「登入」時的原頁,以上種種,再加上身為前端的驕傲XD,Augustus決定自己寫一個。

因為本站是用WordPress架設的,PHP的部份Augustus並不會,所以本篇是直接用JavaScript來接Auth0的API。

接的過程中踩了點坑,會把踩坑跟跳出坑的部份也寫在這篇筆記文裡。


寫code前的必要步驟,跳過

在開始寫code前有些必要步驟,像是註冊Auth0、建立Auth0 APP、取得Client ID、domain……等,本篇跳過,因為都寫在上一篇中了,這邊就不再重覆寫。

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

另外,大部份用Auth0接會員登入的code,本篇也是直接拿上一篇的原始碼來改,可以直接從Github上下載上一篇完整的原始碼。

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


1 頁面新增登入按鈕

插入登入按鈕的方式,如果對PHP很熟,或是WordPress架構很熟的朋友,應該會直接改原有的程式碼。

但Augustus對這二個不太熟XD~而且以前遇過,從佈景主題編輯器上修改code後,一遇到佈景主題有更新,原本加進去的code就不見了的狀況。

所以在新增一個登入按鈕的部份,各頁右上角的小按鈕是用JavaScript來新增,而各頁右側因為本來小工具就可以加區塊了,就用小工具貼上HTML來新增。

這段寫的是用JS新增的code。

確定好按鈕的HTML,把它寫進變數裡:

const loginHTML = '<div id="letswrite-login"><button class="auth0_login btn btn-letswrite small" id="auth0_login" type="button"><i class="fa fa-user"></i><span>會員 註冊 / 登入</span></button><div class="letswrite-user d-none"><button class="auth0_logout btn btn-letswrite small" id="auth0_logout" type="button">登出</button></div></div>';

css的部份就寫進WordPress後台的「編輯css」中。

有了HTML,接著就是要把按鈕insert進指定的區塊中,這邊用的是 insertAdjacentHTML ,這是個好物,自從知道有這function後,就不太用 appendChild 了。

insertAdjacentHTML 的用法可以看MDN上的說明:Element.insertAdjacentHTML()

完整加上按鈕的code:

const loginHTMLWrap = document.querySelector('.header-links');
const loginHTML = '<div id="letswrite-login"><button class="auth0_login btn btn-letswrite small" id="auth0_login" type="button"><i class="fa fa-user"></i><span>會員 註冊 / 登入</span></button><div class="letswrite-user d-none"><button class="auth0_logout btn btn-letswrite small" id="auth0_logout" type="button">登出</button></div></div>';
loginHTMLWrap.insertAdjacentHTML('beforeend', loginHTML);

2 登入按鈕的點擊事件

頁面寫進登入按鈕後,下一步就是要寫按鈕的 onclick

onclick 時執行 login(),這是Auth0的基本用法,上一篇中也有寫到,這邊要額外處理的部份,是一個坑。

在Auth0的後台APP設定中,白名單的部份是不能寫規則運算式的,也就是說不能寫成這樣:

https://letswrite.tw/*

不能用一個 * 符號代表letswrite.tw底下的所有頁面,它必須寫一個絕對路徑,否則就一律阻擋。

但,總不能把每一篇文章的網址都手動輸入進後台吧?這有點石器時代的作法。

也不能要求使用者一定只能在首頁做登入吧?這樣子的UX有點廢。

Auth0的說明文件中,是有提供pop up一個視窗出來,在那個視窗做登入的作法,不過,不能確定pop up在手機上的應用程度,會不會出現什麼樣子神奇的bug?(對,就是在說IOS safari,根本手機界的IE)

後來想到的作法,步驟如下:

  1. 先把點擊按鈕的當下,該頁的網址存進cookies中。
  2. 如果當下的頁面不在首頁,就把頁面轉到首頁,首頁判斷cookies中有沒有值,有的話就執行login的function。
  3. 使用者登入回到首頁後,首頁一樣判斷cookies的值存不存在,存在就轉回到第一步中的頁面,並把cookies給清掉。

這三步看完,乍看之下沒有問題,但實際上存在著另一個問題,就是如果使用者點了登入按鈕,進到Auth0的Universal Login的頁面後,沒有想要註冊或登入會員,又按了上一步回到上一頁呢?那因為cookies一直有值,頁面就會一直做轉址的動作。

所以在實際寫code時,修改後的步驟如下:

  1. 先把點擊按鈕的當下,該頁的網址存進cookies中。
  2. 如果當下的頁面不在首頁,就把頁面轉到首頁。首頁判斷cookies中有沒有值,有的話就把cookies中存進的網址,再存進第二組cookies中,並執行login的function。
  3. 使用者登入回到首頁後,首頁判斷第二組cookies的值存不存在,存在就轉址,並把二組cookies都給清掉

登出的部份情況一樣,Auth0也是有限登出後要轉址到的頁面,設白名單也一樣無法用規則運算式,所以也是要把使用者按下「登出」時,當下頁面的網址給存到cookies中,再轉址回首頁做登出,登出完回來後,cookies中有值就執行轉址回到原頁,並把cookies給刪掉。

存、取、刪cookies的部份,因為懶,直接用了一個套件:js-cookie

按下登入、登出後的程式碼:


3 使用者登入後,抓使用者資訊並呈現在頁面上

Auth0登入後,可以直接用 auth0.getUser() 來取得登入者的資訊。

這邊也踩到了一個坑,從上一篇開始,用Auth0 Universal Login的方式,都是引用它們的 auth0-spa-js

用這個SDK來登入會有一個問題,因為這是給SPA(Single-page application)這種一頁式網站來使用,而WordPress並不是單頁的,因此在執行 auth0.isAuthenticated() 來判斷使用者是否登入時,除了使用者有確實進到Universal Login的頁面做登入的那一次會回傳 true,其它時候都會回傳 false,並且無法透過 auth0.getUser() 來取得使用者資訊。

而且當使用者在WordPress上點選任何一篇文章,整個頁面會重新載入,就代表使用者只要進到別篇文章, auth0.isAuthenticated() 永遠都會回傳 false,然後就抓不到使用者登入的資訊。

後來再查了一下官方的說明文件〈Auth0 Single Page App SDK〉,裡面有提供了另一種取得使用者登入資訊的方試,就是拿access_token去取。

使用者從Universal Login頁面登入回來後,執行 auth0.getTokenSilently() 就可以取得access_token。那我們要做的就是把這組token存下來,當使用者進到別頁後,用這組token去取得資訊回來就行了。

那當然,前端能想到的,其實也就是存進cookies裡。是說把東西存到cookies總覺得有點不安全,但Auth0產生的access_token會是一組亂數,而且可以自己在後台設定token的有效期間,基本上要猜出別的使用者的token很難,如果遇到可以破解token的高手高手高高手,那……即便不是存在cookies裡大概也擋不住了。

這邊Augustus提供用access_token取得使用者資訊的code:

fetch 的 URL 記得替換成 Auth0 APP 中提供的 domain。


放置完成的JS檔

JS檔完成後,最後就是要放進頁面裡。

原本一開始Augustus是直接把script src寫在小工具的自訂HTML裡,後來發現應該是WordPress吐出來的小工具位置不對,一直無法執行JS檔裡的function,最後決定放在GTM中,才成功執行。

Summary
用Auth0在WordPress上做會員註冊、登入功能
Article Name
用Auth0在WordPress上做會員註冊、登入功能
Description
本篇大綱:自己的會員功能自己寫。寫code前的必要步驟,跳過。1 頁面新增登入按鈕。2 登入按鈕的點擊事件。3 使用者登入後,抓使用者資訊並呈現在頁面上。放置完成的JS檔。
Augustus
Let's Write
Let's Write
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言