Ansel Ch
Home About Archives
Home About Archives

[筆記]第三方OAuth SSO登入

工作筆記

1. 企業微信

創建應用透過官方API取得userid，達成SSO登入自家server

流程解說

  • 企業透過corpid, secret取的access_token​
    使用者點擊應用透過OAuth2.0授權後，企業可以帶corpid取得code(授權碼)​
    企業用access_token,code向微信取得user_id​
    企業用access_token,agent_id,user_id向特定user發送訊息​
    透過OAuth2.0 API，企業後端可以取得user_id，達到透過微信進行免手動登入NUP系統

事前準備

agentId​：這支應用的id​
secret​：這支應用的Secret​
corpid​：企業ID,WX or WW開頭​
access_token​：透過corpid, Secret取得​
code​：使用者給予應用的授權碼​
user_id​：員工識別碼​

ＡＰＩ

 取得access_token​：https://qyapi.weixin.qq.com/cgi-bin/gettoken?​corpid=corpid&corpsecret=secret
 取得OAuth2.0授權：https://open.weixin.qq.com/connect/oauth2/authorize?​appid=corpid&redirect_uri=REDIRECT_URI&​response_type=code&scope=snsapi_base&state=STATE#wechat_redirect​
 取得user_id：https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo?access_token=access_token&code=code
 訊息推播：https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=access_token
(詳細訊息推播類別請參考官方文件進行配置)

2. LINE - LIFF

使用LIFF取得使用者資訊

簡單說明

  • 能取得 User 在該 Provider 及 Channel 中可以用來唯一識別的 UserId、公開的個人資料以及代為傳送訊息至 Chat Bot 的權限​
    官方提供LIFF SDK，無須自己打API驗證加快開發流程​
    可直接在Line中開啟內建瀏覽器，無須開啟第三放瀏覽器​
    透過UserId可以達成登入自家系統SSO​
    liff.line.me/ 開頭的網址

事前準備

  • LINE Developers 帳號
  • 建立LIFF(取得使用者資訊進行SSO)
  • 建立Messaging API(訊息推播、官方聊天首頁)

LIFF使用方法

在Endpoint URL的網頁使用LIFF SDK取得使用者資訊
官方說明
事先載入最新SDK :https://static.line-scdn.net/liff/edge/2/sdk.js
使用前需要先liff.init()並且帶入正確的liffid(需要跟liff網址相同)
使用者透過連結開啟後就能取得是誰使用這個連結登入的lineuid
__範例__：

window.onload = function () {
            const defaultLiffId = '2000117491-qM1yLbYe';
            $(document).ready(function () {
                liffInit(defaultLiffId);
            });
        }
        var user_name = "";
        function liffInit(liffId) {
            // withLoginOnExternalBrowser : true 時代表 auto login 啟動，LIFF 初始化後會自動呼叫 liff.login 登入。
            liff.init({ liffId: liffId, withLoginOnExternalBrowser: true }).then(() => {
                $("#os").text(liff.getOS());
                $("#language").text(liff.getLanguage());
                $("#version").text(liff.getVersion());
                $("#lineVersion").text(liff.getLineVersion());
                $("#isInClient").text(liff.isInClient());

                // 取得一般的 user profile
                liff.getProfile().then(function (profile) {
                    console.log(profile);
                    $("#user_avatar").attr("src", profile.pictureUrl);
                    $("#user_name").text('姓名 : ' + profile.displayName);
                    user_name = profile.displayName;
                    // console.log(user_name);
                    $("#user_id").text('使用者ID : ' + profile.userId);
                    $("#user_status").text('狀態文字 : ' + profile.statusMessage);
                });

                // 取得包在 id token 內的 user profile
                const idTokenProfile = liff.getDecodedIDToken()
                console.log(idTokenProfile);
                $("#idToken_user_avatar").attr("src", idTokenProfile.picture);
                $("#idToken_user_name").text(idTokenProfile.name);
                $("#idToken_user_email").text(idTokenProfile.email);
                $("#iss").text(idTokenProfile.iss);
                $("#sub").text(idTokenProfile.sub);
                $("#aud").text(idTokenProfile.aud);
                $("#exp").text(idTokenProfile.exp);
                $("#iat").text(idTokenProfile.iat);
                $("#amr").text(idTokenProfile.amr);
            }).catch((err) => {
                console.log(err.code, err.message);
            })
        }

Messaging API 使用JSON格式推播通知

可以透過推播API發送訊息給lineuid

1. MS Teams

建立APP使用Tab＋Microsoft Teams SDK取的使用者資訊

  1. 使用Microsoft Teams SDK取得使用者的Teams Email，這個方式是不需使用者授權serever端可以直接取得的資訊，若要取的更多使用者權限可以使用GraphAPI取得更多的資訊及應用
  2. 載入CDN
<!-- Microsoft Teams JavaScript API (via CDN) -->
<script
  src="https://res.cdn.office.net/teams-js/2.14.0/js/MicrosoftTeams.min.js"
  crossorigin="anonymous"
></script>

3. 

microsoftTeams.initialize()
microsoftTeams.app.getContext().then((context) => {/*...*/});.