[Day 15] LIFF GetDecodedIDToken

12th鐵人賽

C.Shan

2020-09-30 22:00:57

2624 瀏覽

分享至

前言

我們認識到id_token本身是JWT，其中包含用戶資訊。
但拿到一長串的id_token後，要怎麼知道它包含哪些資訊？

關於 ID Token

讓我們再深入了解id_token，它是依據JWT結構，由三個部分所組成，分別是header、payload和signature。三者之間，由.隔開，每個部分皆由Base64 URL編碼。例如:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

解碼JWT的結果:

header

{
  "typ": "JWT",
  "alg": "HS256"
}

payload

{
    "iss": "https://access.line.me",
    "sub": "U1234567890abcdef1234567890abcdef ",
    "aud": "1234567890",
    "exp": 1504169092,
    "iat": 1504263657,
    "nonce": "0987654asdf",
    "amr": ["pwd"],
    "name": "Taro Line",
    "picture": "https://sample_line.me/aBcdefg123456"
}

signature

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  
your-256-bit-secret

)

詳細的介紹，請參考這篇及JWT Introduction。

liff.getDecodedIDToken

取得id_token的payload，其中包含用戶的暱稱、大頭貼URL和電子郵件地址。

payload

{
    "iss": "https://access.line.me", // id_token 出處
    "sub": "U1234567890abcdef1234567890abcdef ", // User ID
    "aud": "1234567890", // Channel ID
    "exp": 1504169092, // token 到期時間
    "iat": 1504263657, // id_token 產生時間
    "amr": [  // 用戶驗證的方法(可以理解成用戶登入LIFF APP的方法)
        "pwd" // 另外可能出現的值: lineautologin、lineqr或linesso
    ],
    "name": "Taro Line", // 用戶暱稱
    "picture": "https://sample_line.me/aBcdefg123456" //用戶大頭貼URL
}

注意

liff.getDecodedIDToken()的使用，其實和Line Developers Console裡，LIFF APP的scope設定相關。
假如openid未勾選，執行liff.getDecodedIDToken的結果會是null。
執行liff.getDecodedIDToken()後，回傳的payload中，name、picture屬性，也和LIFF APP的scope設定相關。假如profile未勾選，執行liff.getDecodedIDToken後，name、picture屬性不會包含在payload中。

實作

liff.init({
　liffId: '後台取得的LIFF ID'
}) .then(() => {
  if (liff.isLoggedIn()) {
   const idToken = liff.getDecodedIDToken();
   console.log(idToken) // print decoded idToken object
  }
}
}).catch((err) => {
 console.log('初始化失敗')
});