架站小幫手
架站小幫手Power ShopPower CourseLine 私訊
  • WORDPRESS 快速入門
    • 如何登入後台
    • 網站的真正用途 & 製作網站的3步驟
    • WordPress開站基本設定
    • 如何開通外掛授權
    • 如何購買網域
    • 將暫時網域換成正式網域,讓網站正式上線
    • WordPress環境 快速導覽
    • Blocksy佈景主題設定/修改網站整體外觀&字型
    • 頁首選單 Menu 設定
    • 頁尾 Footer 設定
    • 側邊欄 Sidebar 設定
    • 新增頁面 / 文章
    • 文章的分類 / 標籤
    • 安裝外掛
    • 安裝翻譯檔
  • Elementor 編輯器
    • Elementor編輯器 入門篇
    • 用Elementor做Popup彈出式視窗
    • Elementor 主題建構器的用途
    • 匯出/匯入Elementor範本
    • 換了網址後,Elementor的圖片變空白
    • Elementor 編輯器 進階篇
    • 如何使用JetEngine創建 自訂內容類型(Custom Post Type)
    • 如何使用JetEngine編排自訂的列表版型(Listing Grid)
  • WooCommerce商店/購物車
    • 上架商品 / 簡單商品 vs 可變商品
    • 設定優惠碼(折價券)
    • 商品的分類 / 標籤
      • 文章的分類 / 標籤
    • 商品列表側欄的篩選器
    • 設定金流 - 付款方式
    • 設定物流 - 運費 / 台灣離島運費 / 免運提示
    • 結帳流程的重要設定
    • 出貨流程 / 訂單狀態的意思
    • 自訂訂單通知信
    • 如何啟用商品評價/評論功能
    • 設定訂閱型商品(定期定額扣款)
    • 使用Automatewoo設定自動化工作流程
    • 如何做一個加入購物車的按鈕放在任意頁面上
    • 結帳時出現「輸入你的地址以檢視運送選項」錯誤
  • 串接 金流/物流/電子發票
    • [必看]申請前注意事項
    • PayUNi 統一金流
    • Paynow 立吉付 金流 / 物流 / 電子發票
    • LinePay 金流
    • ECPay綠界 金流 / 物流 / 電子發票
    • PchomePay 支付連 金流
    • 藍新 金流 / 物流 / 電子發票(ezPay)
  • 進階延申功能
    • [建置中]設定網站快取,加快載入速度
    • 用WP Social Ninja設定網站右下角懸浮Line連結圖標
    • 串接SaleSmartly客服對話視窗
    • Fluent Form 表單外掛
    • [建置中]Solid Affiliate 聯盟行銷外掛
    • 使用Updraftplus設定網站備份到第三方空間
    • 會員登入註冊
    • 社群登入:使用 Nextend Social Login and Register 外掛
    • [建置中]設置網站發信功能SMTP
    • [建置中]Amelia 預約諮詢系統
  • SEO 搜尋引擎佳化
    • 如何串接 Google Search Console 並提交 Sitemap
    • 如何解讀Google Search Console的錯誤訊息
    • Rank Math SEO外掛
    • SEO最佳化的重點
  • Meta 廣告
    • 如何創建Meta像素
    • 如何在網站上串接Meta像素 & 設置轉換API (Conversion API)
    • 使用WP網站下Meta廣告,如何設置轉換事件
    • Meta廣告後台 如何驗證網域
    • 如何將讓像素出現在廣告帳號裡面
    • 將網站商品串接Meta的動態商品廣告(DPA)
  • Google Analytics / Google Ads 相關
    • 如何串接Google Analytics 4 (GA4)
    • 如何串接Google Tag Manager (GTM)
    • 如何串接Google Ads代碼
  • Email 電子報
    • FluentCRM電子報發信教學
    • 使用Gmail收發網域信箱的信
    • 如何設置「訂閱電子報」欄位
  • 分享權限
    • 分享 Gandi的網域DNS設定權限
    • 分享Cloudflare的DNS設定權限
    • 分享Godaddy的DNS設定權限
    • 分享Namecheap的DNS設定權限
    • 分享遠振資訊的DNS設定權限
  • 模板介紹
    • blog.wpsite.pro 部落格模板
Powered by GitBook
On this page
  • 1. 安裝 Nextend Social Login and Register 外掛
  • 2. 選擇需要的社群登入開始設定
  • 3-1. 如何啟用 Google 登錄
  • 3-2. 如何啟用 Line 登錄
  • 3-3. 如何啟用 Facebook 登錄
  1. 進階延申功能

社群登入:使用 Nextend Social Login and Register 外掛

Previous會員登入註冊Next[建置中]設置網站發信功能SMTP

Last updated 3 months ago

Line 登入需要付費版外掛

1. 安裝 Nextend Social Login and Register 外掛

2. 選擇需要的社群登入開始設定

  1. 從後台 / Nextend Social Login

  1. 選擇要設定的社群,按 Getting Started

3-1. 如何啟用 Google 登錄

  1. 點選 「 Getting Started 」 後會進入以下畫面,請依以下步驟進行設置:

  1. 如果您還沒有專案,則需要創建一個。按下 「新建專案 」 來執行此操作(如果已經有一個專案,那麼在頂部欄中按兩下您的項目名稱,會彈出一個模態框並按下按下 「新建專案 」 )

  1. 為專案命名,然後再次按下 「 建立 」

5.擁有專案後,會進入儀錶板。( 如果之前已經有一個專案,請在頂部列中選擇已創建的專案),點擊左側的 「OAuth 同意畫面」

  1. 根據需要選擇使用者類型,然後按 「 建立 」 。如果您想為任何擁有 Google 帳戶的使用者啟用 Google登錄,請選擇 「 外部 」 選項!

  2. 輸入以下,在 「授權網域」 下,按 「新增網域」 不要帶子域!例如:example.com,最後「儲存並繼續」

  1. 依序完成並按 「儲存並繼續」

  1. 在左側選 「憑證」,然後按下 「 +建立憑證 」 ,選擇 「OAuth 用戶端 ID」

  1. 在 「應用程式類型」 下選擇 「網頁應用程式」 ,並為您的 OAuth 用戶端 ID 命名(僅供控制台查看)。

  1. 按 「+新增URI」 按紐,貼上WP後台的 Nextend Social Login 找到後端建議的 URL,最後點擊 「建立」

  1. 完成後會跳出以下視窗,如果沒有請轉到左側列表的「用戶端」選擇您的應用程式查詢,複製“用戶端編號Client ID”和“用戶端密碼Client Secret”

  1. 將複製下來的“用戶端編號Client ID”和“用戶端密碼Client Secret” ,貼到WP後台的Settings中並按下「儲存設定」

  2. 會跳出驗證對話框,再按下 「Verify Settings」 進行驗證 (此驗證可説明您識別應用程式可能存在的問題)

  1. 按下左側的“OAuth 同意螢幕”,按 「發佈應用程式」按鈕,然後按確認,完成:)

  1. 啟用後,每次使用者使用 Google登錄時,Google 都會顯示帳戶選擇提示

3-2. 如何啟用 Line 登錄

  1. 如果您尚未登錄,請使用您的 Line 企業帳號登入

  2. 按一下 「 Create a new provider 」 按鈕。

  1. 填寫 “Provider name” 字段,然後按一下 “Create” 按鈕。

  2. 在 「 Channels 」 面板下,選擇 「 Create a LINE Login channel 」 選項。

  1. 確保 “LINE Login” 選擇 “Channel type”

  2. 對於 “Provider”,從清單中選擇您剛剛建立的提供者。

  1. 選擇您的 “Region”。

  2. 新增您的 「 Channel icon 」 、 「 Channel name 」 和 「Channel description 」 。這些將出現在您的同意畫面上!

  3. 在 「 App types 」 中選擇 「 Web app 」 選項。

  1. 閱讀並同意 “LINE Developers Agreement”,然後按一下 “Create” 按鈕。

  1. 向下捲動到 “OpenID Connect”,點擊 “Email address permission””標籤附近的 “Apply” 按鈕。

  1. 填寫表格,然後按一下 「 Submit 」 按鈕。

  2. 向上捲動至頁面頂部並選擇 “LINE Login” 部分。

  3. 在 「 Callback URL 」 欄位中,新增 Nextend Social Login 在後端建議的 URL。

  4. 在您的應用程式名稱下,點擊 “Developing” 按鈕並發布您的頻道!

  5. 轉到 “Basic settings” 選項卡,找到必要的 “Channel ID” 和 “Channel secret” 值,然後在插件設定中填寫這些欄位!

3-3. 如何啟用 Facebook 登錄

  1. 按下 「建立應用程式」 按鈕

  2. 填寫 「應用程式名稱」 和 「聯繫電子郵件」 欄位,並繼續下一步,最後按下確定

  1. 成功建立應用程式後會進入主控版畫面,找到FB按下設定

  1. 選擇 「網站」 ,並輸入你網站網址,記得按 “save”

  1. 在WP網站後台>設定> Nextend Social Login>FB getting start 。找到URI並複製,貼到框選位置

  1. 到應用程式設定>基本資料 填寫,完成後按下 「上線」 按鈕

  1. 在應用程式的左側選中“基本資料”中找到App ID 應用程式編號 和 App Secret 應用程式密鑰,進入後台填入

  1. 於後台完成設定

  1. 最後按下 「Eable」 。當登錄畫面出現 FB登錄按鈕 即成功

官方教學:

官方教學影片:

進入: ,並登入

進入

官方教學:

官方教學影片:

進入

https://nextendweb.com/nextend-social-login-docs/provider-google/
https://www.youtube.com/watch?v=i01nbsbNMmw&list=PLSawiBnEUNftt3EDqnP2jIXeh6q0pZ5D8&index=3
https://console.developers.google.com/apis/
https://developers.line.biz/console/
https://nextendweb.com/nextend-social-login-docs/provider-facebook/
https://www.youtube.com/watch?v=giHaGhjuh2A&list=PLSawiBnEUNftt3EDqnP2jIXeh6q0pZ5D8&index=2
https://developers.facebook.com/apps/
安裝外掛