最近朋友問我如何在網站上做到使用 LINE 登入，於是我決定把過程整理成一篇筆記
分享給有興趣的朋友參考，畢竟現在台灣這邊幾乎人人都有 LINE (賴)
其實 LINE 也是透過 OAuth2 來做到，其實就是那一套，導入到它們的 SSO 網址等入後，LINE 會給我們 code
我們在用 code 去換 access_token，其實大概流程都是這樣這邊我就標註一些重要點，之後就方便大家複製貼上用就好
1. 取得 LINE 開發資料，這邊就不贅述，留下幾張圖，自己去開發者那邊 想辦法弄到跟我畫面一樣的地方找到相關的資訊
2. 將使用者導入到 LINE 的登入畫面，這段程式碼會引導用戶到 LINE 的授權頁面，讓用戶授權後回傳一個授權碼 (code)。
//將客戶去 LINE L
public IActionResult OnPostLine()
{
return new RedirectResult("https://access.line.me/oauth2/v2.1/authorize?" +
"response_type=code" +
"&client_id="+ clientId +
"&redirect_uri=" + HttpUtility.UrlEncode(redirectUrl) +
"&state=user_id_donma" +
"&scope=profile%20openid%20email" +
"&nonce=" + DateTime.Now.ToString("yyMMddHHmmss"));
return Page();
}
3. 用授權碼換取 Access Token
用戶授權後，後端會收到一個 code，接著我們使用這個 code 向 LINE 的 API 換取 access token
public string GetLineAccessTokenByCode(string clientId, string clientSecret, string usercode)
{
// API URL
string url = "https://api.line.me/oauth2/v2.1/token";
var redirect_url = "https://localhost:7247/Index";
var client = new RestClient("https://api.line.me/oauth2/v2.1/token");
var request = new RestRequest(new Uri(url), Method.Post);
request.AddHeader("Content-Type", "application/x-www-form-urlencoded");
request.AddParameter("grant_type", "authorization_code");
request.AddParameter("code", usercode); // user code
request.AddParameter("redirect_uri", redirect_url); //需要跟請求的 redirect_uri 維持一致
request.AddParameter("client_id", clientId);
request.AddParameter("client_secret", clientSecret);
try
{
var response = client.ExecuteAsync(request).Result;
if (response.IsSuccessful)
{
return response.Content;
}
else
{
return ($"Error: {response.StatusCode} - {response.ErrorMessage}");
}
}
catch (Exception ex)
{
return ("Exception occurred: " + ex.Message);
}
}
//Response
/*
"access_token":"access_token","token_type":"Bearer","refresh_token":"..","expires_in":2592000,"scope":"openid profile",
"id_token":"id_token"}
*/
4.透過 Access Token 獲取用戶資訊，取得 Access Token 後，我們就可以用裡面的 id_token 來獲取用戶的基本資料，例如姓名、Email 和大頭貼等
public string GetLineUserDataByToken(string clientId,string id_token) {
var client = new RestClient("https://api.line.me/oauth2/v2.1/verify");
var request = new RestRequest(new Uri("https://api.line.me/oauth2/v2.1/verify"), Method.Post);
request.AddHeader("Content-Type", "application/x-www-form-urlencoded");
request.AddParameter("id_token", id_token);
request.AddParameter("client_id", clientId);
try
{
var response = client.ExecuteAsync(request).Result;
if (response.IsSuccessful)
{
return response.Content;
}
else
{
return ($"Error: {response.StatusCode} - {response.ErrorMessage}");
}
}
catch (Exception ex)
{
return ("Exception occurred: " + ex.Message);
}
}
//Response
/*
{"iss":"https://access.line.me","sub":"sub","aud":"2004705472","exp":1734593683,"iat":1734590083,
"nonce":"241219143435","amr":["linesso"],"name":"MaMaD",
"picture":"https://profile.line-scdn.net/0hZSawgCNMBXxcDilnNJx6K2BLCxErIAM0JDwfT3EPWUQlPUArYm1KSXsHDh8jNhUjaG1JHSkJX0Vw",
"email":"sample@gmail.com"}
*/
這邊大概筆記到這邊，希望對之後有需要的朋友可以有些幫助 :)
--
本文原文首發於我的個人部落格：使用 LINE 帳號登入 - 簡單實現從授權到用戶資料取得
---
The bug existed in all possible states.
Until I ran the code.
