如何使用 LINE login 快速登入 WordPress+WooCommerce?(免費外掛)

如何使用 LINE login 快速登入 WordPress+WooCommerce?(免費外掛)

如果你有 經營網路商店,可能會需要建置會員註冊的功能,除了方便後續的購物流程,也能進一步留下訪客資料,為後續的行銷做充足準備。

之前我們已經分享過 Super Socializer 外掛三大功能:「 Facebook+Google 快速登入 」、「 社群分享 」、「 社群評論 」。更多 Super Socializer 外掛教學

不過你知道嗎?除了使用 Facebook+Google 快速登入外, Super Socializer 也有 LINE 登入功能唷( WordPress Line Login )!

這篇文章會和大家分享,如何在 WordPress+WooCommerce 網站上,嵌入免費的 LINE 快速登入功能。

那廢話不多說,我們就開始吧!

使用 LINE login 快速登入 WordPress+WooCommerce,完整影片學習:

如何使用 LINE login 快速登入 WordPress+WooCommerce 完整影片學習

1. Super Socializer 是什麼?

WordPress 社群登入註冊:Super Socializer 外掛
WordPress 社群登入註冊:Super Socializer 外掛

Super Socializer 是一款優質的社群外掛,主要包含三大功能,分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」,一款外掛就能搞定這些事情,簡單俐落。更多 Super Socializer 完整教學

Super Socializer 有幾個很棒的功能&特色,挑選出來跟大家分享。

  • 支援多種社群快速註冊+登入功能(像是 Facebook、Google、Line ..)。更多 Line 快速登入功能
  • 可在 WordPress 登入、註冊、評論表單 ..,啟用社群登入功能。
  • 可在 WooCommerce 結帳頁面、客戶登錄表單上,啟用社群登入功能。
  • 超過 100 種社群軟體的分享,且支援計數功能。
  • 社群分享按鈕的樣式調整(像是形狀、大小、顏色、顯示順序、水平或垂直浮動顯示 ..)。
  • 可自訂登錄、註冊後的網址重定向。
  • 啟用社群留言功能,像是 Facebook、Disqus。
  • 多站點兼容。
  • 支持啟用 HTTPS 的網站。

下圖就是基本款的使用社群登入到 WordPress 後台(社群登入還能放在很多頁面,這只是其中一種)。

WordPress 社群登入註冊:社群登入功能整合
社群登入功能整合

另外的就是社群分享功能(有超過 100 種社群集合),如下圖。

WordPress 社群登入註冊:多種社群分享&樣式調整
多種社群分享&樣式調整

由於 Super Socializer 是個社群集成外掛,你也能依照自己需求,挑選特定功能外掛安裝即可,這樣可降低網站負擔。


2. 使用 LINE 社群登入

這個章節,我們會分 4 個步驟,並且示範如何創建 LINE 快速登入( WordPress Line Login )。

Step1:下載 Super Socializer+啟用 LINE 登入鈕

前往 WordPress 外掛 > 安裝外掛,搜尋 Super Socializer 然後安裝+啟用。

WordPress 社群登入註冊:安裝 Super Socializer 外掛
WordPress 社群登入註冊:安裝 Super Socializer 外掛

啟用之後,進入「 Social Login 」面板,將「 Enable Social Login 」打勾,選取 LINE 選項,等等還會有步驟要在這塊面板進行,不過我們先儲存設定。

WordPress 社群登入註冊:開啟 LINE 社群登入

切換到右邊「 Advanced Configuration 」面板,幫社群登入取個標題。

開啟 WooCommerce 登入 / 註冊 / 結帳頁面的社群登入功能,還有可設定登入 / 註冊成功後,網址要導向到哪裡。

WooCommerce 會員註冊&登入:Super Socializer 社群登入,進階設定
Super Socializer 社群登入,進階設定
  • Enable at WooCommerce Customer Login Form:在 WooCommerce 登入表單,開啟社群快速登入。
  • Enable at WooCommerce Customer Register Form:在 WooCommerce 註冊表單,開啟社群快速登入。
  • Enable at WooCommerce Checkout Page:在 WooCommerce 結帳表單,開啟社群快速登入。
  • Login redirection:登入後導向的位置,可依照自己需求選擇。有提供 4 種選項,分別是 Same page where user logged in(登入後停留在當前頁面)、Homepage(前往首頁)、Account dashboard(會員專區)、Custom Url(客製化網址)。
  • Registration redirection:註冊後導向的位置,可依照自己需求選擇,其他同上。

Super Socializer 社群登入設定完成後,下面就來申請 LINE 官方串接登入功能!

Step2:創建 Line Developer 帳號+建立頻道

Line Developer Portal 並使用個人 Line 帳號登錄,如果沒有帳號,就先要先註冊一個。

登入之後,會來到會員頁面。找到「 Providers 」區塊,按下「 Create 」按鈕,接著輸入網站名稱,點擊「 Create 」進行建立。

WordPress Line Login :新增 LINE Providers

創建成功,會進入新建「 Channels 」頁面,選擇「 Create a LINE Login channel 」。

WordPress Line Login :Create a LINE Login channel 創建 LINE 登錄頻道
Create a LINE Login channel 創建 LINE 登錄頻道

接著便會進入頻道設定,第一個選項選「 LINE Login 」,地區選「 Taiwan 」,剩下的名稱、 LOGO 等 ..,則可自行設定。

WordPress Line Login :頻道設定細項

接著下面兩項是頻道名稱、頻道說明,輸入四個字以內,方便自己辨識即可。

WordPress Line Login :頻道名稱及說明設定

「 App types 」選擇「 Web app(網站類型)」,然後填入 Email 。

再來隱私權政策(Privacy policy URL)&服務條款(Terms of use URL)也可輸入網址,完成後勾選「 同意 LINE Developers 條款 」,然後進行建立。

設定 web app 、 設定整體完成

備註:如果電商還沒有隱私權政策&服務條款頁面,可參考 WordPress 頁面新增,然後再到 WooCommerce 設定內指派即可。更多 WooCommerce 電商教學

創建完成後,可前往「 LINE Login 」> 打開 「 Web app 」> 變更「 Callback URL(回調網址)」為:你的首頁網址/SuperSocializerAuth/Line

設定完成,按下「 Update 」即可。

開啟「 Web app 」、設定「 Callback URL 」為首頁網址

回到「 Basic settings 」頁面,選擇「 Developing 」> 「 Publish 」公開使用此串接頻道。

公開 LINE channel

那我們就完成 LINE 的串接頻道啦!

Step3:複製 Line 啟用憑證,並貼入到 WordPress 網站

我們到「 Basic Settings 」頁面,下滑找到「 Channel ID 」與「 Channel secret 」這兩項數值,複製下來。

WordPress Line Login :複製「 Channel ID 」、「 Channel secret 」兩數值
複製「 Channel ID 」、「 Channel secret 」兩數值

接著回到 WordPress 後台,前往 Super Socializer > Social Login 面板 > 找到「 Line Channel ID 」與「 Line Channel Secret 」兩項數值。

將剛剛複製的數值貼上對應的空格,選擇儲存。

到後台貼上「 Channel ID 」、「 Channel secret 」兩數值

Step4:顯示成果一覽

Line 快速登入的憑證啟用後,前往 WordPress 前台的會員登入&註冊頁面,就會發現 LINE 快速登入功能,已經出現囉。

我們也可以順利使用 Line Login,進行會員快速註冊+登入了:)

WordPress Line Login :LINE 社群登入功能顯示
LINE 社群登入功能顯示

除此之外,也可以在結帳頁面設定顯示 LINE 登入功能,這也是許多電商都必備的功能唷。

那麼,以上就是完整的「 WordPress Line Login 會員快速登入 / 註冊 」教學:)


常見問題

Super Socializer 是什麼?

Super Socializer 是一款優質的社群外掛,主要有 3 大功能,分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」一款外掛就能搞定這些事情,簡單俐落!

Super Socializer 可以串接除了 LINE 以外的社群軟體嗎?

只要與第三方社群軟體做好設定,即可使用 Super Socializer 系統支援的社群軟體。

Super Socializer 官方網站已有詳細的教學。

想要串接 FB 和 Google 也可以參考:用 Super Socializer 建立 FB 、 Google 快速登入 教學。

除了 Super Socializer ,還想知道別的 WooCommerce 好用外掛 & 佈景主題?

可以參考 電商優質外掛推薦電商優質主題推薦,歡迎新手電商平台站長參考使用~


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

12 thoughts on “如何使用 LINE login 快速登入 WordPress+WooCommerce?(免費外掛)”

    1. 小犬網站 - Luna

      嗨,主淮,

      會出現 404 應該是有哪一個環節漏掉了,建議你重新新增一個 LINE Login channel 再跑一次流程試試看。

      要特別注意的是,地區設置只能選擇:日本、泰國、台灣、印度尼西亞 這四個國家,因為 Super Socializer 只支援這四個國家的 Line 串接。

      其他部分應該是沒有問題的。

      重跑之後,若還有出現 404 錯誤,可能就是外掛跟主題之間有衝突,可以在後台一一檢查。

      或是尋求 Super Socializer 支援論壇的幫助。

  1. 您好~
    我們目前都照著您的指示都可以登入囉
    太感謝了
    請問可以讓登入後填寫email的跳出視窗改成中文或是取消這個跳出視窗嗎

    1. 小犬網站 - Luna

      嗨,宗鑫,

      因為 WordPress 是用電子郵件來判斷登入者是否為 WordPress 使用者,所以取得電子郵件是必要的,可能沒辦法取消唷。

      至於改成中文,我不太清楚跳出視窗是由 Super Socializer 提供或是由 LINE 提供,

      如果是 Super Socializer ,可嘗試看看 Loco Translate 進行翻譯唷!

  2. 小犬大大您好:
    想請問一下,我設定好後,可以順利使用LINE登入了,可是用LINE登入後,名字都會變成很長的英文亂碼,信箱也會是英文一長串在加@line.com,是哪裡設定錯誤嗎?

    1. 小犬網站 - Luna

      嗨,小麥,

      如果登入後 LINE 的用戶名是一長串數字,可能表示登錄的 LINE 帳戶沒有相對應的名稱或用戶名,可以重新設置看看。

      如果電子郵件顯示:英文亂碼@ line.com,可能表示 LINE login 沒有開啟用戶登入時授權 Super Socializer 自動讀取登錄者的電子郵件,

      可以到 Line Developer Portal 的登錄頻道,檢查「 OpenID Connect 」是否為「 Applied 」,若沒有則需要申請。

      如果登錄者拒絕 Super Socializer 讀取電子郵件,或者登錄者的 LINE 帳號沒有關聯電子郵件地址,

      可以前往 Super Socializer 設定 > 「 Advanced Configuration 」面板 > 開啟「 Email required 」。

  3. 您好,我成功讓user可以點選line登入,但是登入過程是到line App點擊確認後,卻跑到瀏覽器要重新在瀏覽器登入line帳號,請問這狀況怎麼解決呢?謝謝。

    1. 犬哥網站 - Luna

      嗨,gooptions,

      如果網頁的瀏覽器有成功登錄,那就表示登入功能是正常的,

      有出現類似情況,可以重新將登入頻道刪除再重新建立一次試試看。

  4. 小犬好, 謝謝細心教學, 我也成功在測試站安裝line login了, 在電腦上的瀏覽器執行正常, 但用手機的chrome瀏覽器, 點擊line login按鍵, 卻出現”錯誤 無法正常執行”, 請問是哪個地方需要修正呢?

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端