LINEログイン認証をWebサイトに組み込む
LINEログイン認証をAngularを使ったWebサイトに組み込む手順を解説します。
動作イメージ
LINEログイン クライアント ID を取得する
ウェブアプリにLINEログインを組み込むの手順に従い、LINEログイン クライアント IDを取得します。
👇プロバイダの作成
👇LINEログインチャンネルの作成
👇チャンネルIDとチャンネルシークレットをメモします
👇コールバックURLを入力します
http://localhost:4200
Angular 構成の準備
以降の手順は以下記事の内容を前提とします。
Angularのインストール～最小限構成の設定手順
LINE認証の実装
ユーザーに認証と認可を要求する
👇認証リクエストを送信
https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=[チャンネルID]&redirect_uri=http%3A%2F%2Flocalhost%3A4200&state=12345abcde&scope=profile%20openid
👇リダイレクトされたURLパラメータから認証トークンを取得します
ngOnInit(): void {
let tmp_code = this.getParamValue("code");
}
getParamValue(key: string): string{
let ret_value = "";
if(location.search.substring(1) != ""){
var pair = location.search.substring(1).split('&');
for(var i=0;pair[i];i++) {
var kv = pair[i].split('=');
if(kv[0] == key){
ret_value = kv[1];
break;
}
}
}
return ret_value;
}
アクセストークンを発行する
👇認証トークンからアクセストークンを取得する
ngOnInit(): void {
let tmp_code = this.getParamValue("code");
if (tmp_code){
this.get_auth_code(tmp_code);
}
}
get_auth_code(code_value:string): void{
let httpHeaders = new HttpHeaders({
'Content-Type' : 'application/x-www-form-urlencoded',
});
let options = {
headers: httpHeaders,
};
const postParam = new HttpParams()
.set("code",decodeURIComponent(code_value))
.set("client_id",AppComponent.CLIENT_ID)
.set("client_secret",AppComponent.CLIENT_SECRET)
.set("redirect_uri","http://localhost:4200")
.set("grant_type","authorization_code")
const url = "https://api.line.me/oauth2/v2.1/token"
console.log(postParam)
this.http.post<any>(url, postParam, options).subscribe({
next:(data) => {
if("access_token" in data){
sessionStorage.setItem(AppComponent.ACCESS_TOKEN_SAVE_KEY,data["access_token"]);
this.access_token = data["access_token"];
}
if("refresh_token" in data){
localStorage.setItem(AppComponent.REFRESH_TOKEN_SAVE_KEY,data["refresh_token"])
}
},
error:(e) =>{
console.log("NG");
console.error(e);
},
complete: () => {
console.log("complete");
}
})
}
ユーザー情報を取得する
buttonClickFunc(): void{
let httpHeaders = new HttpHeaders({
'Content-Type' : 'application/json',
'Authorization' : 'Bearer ' + this.access_token
});
let options = {
headers: httpHeaders,
};
const url = "https://api.line.me/oauth2/v2.1/userinfo"
this.http.get<any>(url, options).subscribe({
next:(data) => {
console.log("ok");
console.log(data);
},
error:(e) =>{
console.log("NG");
console.error(e);
},
complete: () => {
console.log("complete");
}
})
}
👇関連記事
👇参考URL
本記事へのリンク
https://docs.saurus12.com/frontend/line_auth
[keywords]
LINEログイン OAuth Angular
更新日:2024年06月07日
