顯示具有 Third-Party Authentication 標籤的文章。 顯示所有文章
顯示具有 Third-Party Authentication 標籤的文章。 顯示所有文章

2020年9月1日 星期二

以 Facebook 為範例設定 Open edX 第三方登入


之前介紹過 Open edX 的第三方登入,

今天就以實際例子來示範:

以 Facebook 為範例設定 Open edX 第三方登入

首先要先到 FB 開發控制台 新建一個應用程式,

系統會詢問程式的用途,

此處選擇 "任何其他用途"


接著填寫應用程式的名稱以及連絡相關資訊,

再依照自己需求新增此應用程式使用到的 FB產品,

此處當然是選擇 "Facebook 登入"


並在設定頁面,

設定好重新導向 URI,

回到 Open edX 的 Django admin ,

找到 Third-party authentication,

新增 Provider Configuation (OAuth) 設定

勾選 Enable
設定icon class : fa-facebook
Name: Facebook
Slug :default
Site:在下拉式選單選擇目前網站
勾選 Visible
填上 Client id , Client secret (可在FB應用程式 - > 設定 -> 基本資料中找到) 


回到 Open edX 首頁即可看到新的登入選項,

跟帳號綁定後,

就可以使用 FB 帳號登入 Open edX。


 


2020年1月14日 星期二

從程式碼解析 OpenedX Oauth 第三方登入流程


之前提到過 OpenedX 線上教學平台,

提供了線上學習的管道,

既然提供了會員登入的方式,

就難免會提到第三方登入,

畢竟它還是很方便的登入方式,

而且還不用多記憶一組帳號密碼,

知名的網站通常都有提供第三方登入功能,

例如 Google, Facebook, Line 等等,

今天就帶大家

從程式碼解析 OpenedX Oauth 第三方登入流程

網站登入位址大多都為 /login

OpenedX 也不免俗的從這開始,


從 lms / djangoapp / student_account / views 中,

可找到 login_and_registration_form,

在這個步驟會收集一些待會會用到的參數資料,

(例如 login後要回到哪個網址? 使用者是要註冊還是登錄?)

傳到  login_and_register.html 中


到這裡不得不說 OpenedX 確實不愧為大型專案,

會這樣說的原因在於在此之前所說的都是 Django 的管轄範圍,

一步步將所需資料傳遞又回到前端 HTML ,

後面更採用了 underscore.js 的語法 。

在 login_and_register.html 中,

會由上述的參數中決定要顯示何種畫面給使用者觀看,

(會顯示不同的 template)

此處範例為 login 故將會跳到 login.underscore 的 template中,


樣板( template )的內容不外乎就是要使用者輸入帳號密碼,

輸入完畢後點選 sign in 按鈕登入,

當然今天的主題是第三方登入,

在這頁面會顯示出管理者開放的第三方列表,

點選需要的登入按鈕就會導到第三方的驗證網址,


HTML所呈現的畫面如下圖,

中間的 Email / Password 就是原有預設的帳號密碼登入,

第三方登入的列表會顯示在

------------------ or sign in with ------------------

的下方,

只要點了按鈕就會進入第三方的驗證畫面中,

Openedx 預設支援 Google / Facebook / Azure / ....等等,

其實這是能夠額外自行加入的,

不過這就是更進階的方法,

在此不多做描述。
這些第三方登入的列表取決於 OpenedX LMS 後台 admin 中,

Third-party authentication 的 Provider Configuration,

也就是說將要使用的第三方登入廠商的資訊寫在此處,

特別是最重要的 client_id 與 client_secret ,

此兩者為第三方廠商所提供,

用在後面要索取認證碼(code) 與令牌(token)的,


最後再回到 finish_auth 決定要前往哪個頁面,

到此登入就結束了。


值得一提的是,

OpenedX 是採用綁定方式來與平台上面的帳號連結,

並非直接以第三方的帳號登入,

所以在使用第三方登入之前必須要先經過綁定的動作,

要前往綁定功能頁面可先於右上角帳號的下拉式選單找到 Account,

在 Account Setting 頁面找到 Linked Accounts,

在此頁面能夠找到目前與此帳號綁定的第三方廠商。


而這部分的程式碼可至

lms / static / js /student_account/ views 中,

找到 account_settings_factory.js 這個檔案,

關於綁定相關的程式都寫在此處。


關於 OpenedX 第三方登入的流程解析就到此,

其實中間還少了一些,

不過那屬於 Oauth 協定的一部份,

不在今天的主題內,

下次有機會再介紹,

請待下回分解。



2019年6月20日 星期四

Open edX第三方帳號登錄(Oauth2)


由於Open edX的開放,

所以對於第三方網站的支援也蠻多樣的,

針對第三方登錄,

Open edX是採用與現有Open edX帳號綁定的方式,

而非直接註冊一個新帳號給予第三方帳號使用,



Open edX支援底下幾種類型的第三方伺服器:


  • 基於Oauth的provider

  • Security Assertion Markup Language (SAML)  V2

  • LTI


既然Open edX支援,

接下來就教大家如何將此服務開啟

Open edX第三方帳號登錄(Oauth2)


1.
首先找到  /edx/app/edxapp/lms.env.json ,

找到

"FEATURES" : {
    ...
    "ENABLE_COMBINED_LOGIN_REGISTRATION": true,
    "ENABLE_THIRD_PARTY_AUTH": true
}

並確認ENABLE_THIRD_PARTY_AUTH為enable


2.
接著就是到django admin中找到底下



以Oauth為範例,

選擇Provider configuration (OAuth)後的 Add,

新增一個provider設定


3.
比較重要的幾個設定為

已啟用(Enable)  :  此選項當然要打勾啟用

icon class / icon image:  此兩者必須要設定其中一項

Name:  即provider的名字

site: 填寫目前Open edX網域名稱



Visible:  當然要打勾, 不然就使用者無法看到登入選項

Backend name:  目前的第三方下拉式選單,預設有Google , Facebook, Linkedin, Azuread等

再來就是Oauth中由Provider所提供的

Client ID與 Client Secret

按下儲存



4.
在Open edX登入畫面即可看到如以下的按鈕

使用者可根據自己需求,

點選不同第三方進行登錄


5.
前面有提到Open edX的第三方登入必須綁定現有的帳號才能使用,

所以第一次使用第三方登入必須先以平台的帳號登入,

在右上角下拉式選單中選擇 "帳號"(Account),

再到"已連結帳號"分頁進行綁定




除了Google , Facebook 等等,

據說還支援了其他不少的第三方Provider,

不過預設在系統中並未列出來,

僅在官方文件有提到: