LINE 로그인 기능을 Node-RED로 구현
소개
이번에는 Hackason에서 자주 이용되는 Node-RED와 LINE의 API를 이용한 것을 기재한다.
제1탄으로서, LINE 로그인 기능의 실장 방법을 여기에 기재한다.
※자신이 향후 이용하기 위한 메모 쓰기
LINE Developers
LINE Developers에 로그인
LINE Developers에 로그인합니다.
공급자 만들기
공급자를 만듭니다.
채널 만들기
채널 타입을 「LINE Login」으로 하고, 방금 작성한 프로바이더를 선택해, 채널을 작성한다.
LIFF 애플리케이션 만들기
LIFF 응용 프로그램을 만듭니다.
Endpoint URL은, 아래에 기재하는 Node-RED로 작성한 URL로 한다.
작성이 끝나면, LIFF detail내의 LIFF URL 「line://app/xxxxxxxxxxxxxxxxxxx」의 xxxxxxxxxxxxxxxxxxx 부분을 메모해 둔다. (나중에 Node-RED와 연결할 때 사용하기 위해)
Node-RED
※Node-RED에 등록되어 있는 전제로 이하를 기재
웹 페이지 만들기
노드 위치에서 다음 노드를 제거하고 작업 영역에 배치합니다.
· "입력"영역의 "http"노드
· "기능"영역의 "template"노드
· "출력"영역의 "http response"노드
왼쪽에서 이러한 노드를 순서대로 나란히 연결합니다.
「http」노드의 편집화면을 열어, URL란에 Web페이지의 표시용의 주소(이번은 「/line」)를 입력하고, 「마침」을 클릭한다.
그런 다음 오른쪽 상단의 배포를 클릭합니다.
template 노드에서 편집
template 노드 내에 다음의 코드가 기술된다.
template<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>LINE ログイン</title>
</head>
<body>
<div id="app">
<img :src=pictureUrl alt="profile" width="100px" align="left"/>
<h2><% displayName %></h2>
<p><% userId %></p>
<p><% statusMessage %></p>
<button @click=logout>ログアウトする</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
<script>
'use strict';
const app = new Vue({
el: '#app',
data: function(){
return{
displayName: '',
userId: '',
statusMessage: '',
pictureUrl: '',
}
},
delimiters: ["<%","%>"],
methods: {
//プロフィール取得関数
getProfile: async function(){
const accessToken = liff.getAccessToken();
const profile = await liff.getProfile();
this.displayName = profile.displayName; //名前
this.userId = profile.userId; //ID
this.pictureUrl = profile.pictureUrl; //アイコン画像
this.statusMessage = profile.statusMessage; //ステータスメッセージ
},
//ログアウト処理
logout: async function(){
if (liff.isLoggedIn()){
alert('ログアウトします。');
liff.logout();
window.location.reload();
}
},
},
//ページを開いた時に実行
mounted: async function(){
await liff.init({
liffId: 'xxxxxxxxxxxxxxxxxxx' //LIFFのID
});
//LINE内のブラウザかどうか
if(liff.isInClient()){
alert('LINE内のブラウザ');
this.getProfile(); //LINE内で開いた場合はログイン処理なし
}else{
//外部ブラウザかどうか
if(liff.isLoggedIn()){
alert('外部ブラウザ');
this.getProfile();
}else{
liff.login();
}
}
}
});
</script>
</body>
</html>
Node-RED와 LIFF 연결
메모해 둔 LIFF URL 「line://app/xxxxxxxxxxxxxxxxxxx」의 xxxxxxxxxxxxxxxxxxx 부분을 template 안의 코드에 붙여 넣는다. (아래의 xxxxxxxxxxxxxxxxxxx 부분)
templateliffId: 'xxxxxxxxxxxxxxxxxxx'
배포하고 완성! !
Node-RED로 만든 URL에 액세스하여 사용해보십시오!
결론
메모 쓰기 때문에 전해하기 어려운 부분이 있으면 죄송합니다.
어드바이스를 코멘트등으로 받을 수 있으면 도움이 됩니다.
참고 자료
LIFF v2에서 LINE 로그인, QR 스캔, LIFF에서 메시지 전송 등을 시도해보기 핸즈온 #영웅 리그
Reference
이 문제에 관하여(LINE 로그인 기능을 Node-RED로 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RyogaTakao/items/7b2649709256147c7902
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
LINE Developers에 로그인
LINE Developers에 로그인합니다.
공급자 만들기
공급자를 만듭니다.
채널 만들기
채널 타입을 「LINE Login」으로 하고, 방금 작성한 프로바이더를 선택해, 채널을 작성한다.
LIFF 애플리케이션 만들기
LIFF 응용 프로그램을 만듭니다.
Endpoint URL은, 아래에 기재하는 Node-RED로 작성한 URL로 한다.
작성이 끝나면, LIFF detail내의 LIFF URL 「line://app/xxxxxxxxxxxxxxxxxxx」의 xxxxxxxxxxxxxxxxxxx 부분을 메모해 둔다. (나중에 Node-RED와 연결할 때 사용하기 위해)
Node-RED
※Node-RED에 등록되어 있는 전제로 이하를 기재
웹 페이지 만들기
노드 위치에서 다음 노드를 제거하고 작업 영역에 배치합니다.
· "입력"영역의 "http"노드
· "기능"영역의 "template"노드
· "출력"영역의 "http response"노드
왼쪽에서 이러한 노드를 순서대로 나란히 연결합니다.
「http」노드의 편집화면을 열어, URL란에 Web페이지의 표시용의 주소(이번은 「/line」)를 입력하고, 「마침」을 클릭한다.
그런 다음 오른쪽 상단의 배포를 클릭합니다.
template 노드에서 편집
template 노드 내에 다음의 코드가 기술된다.
template<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>LINE ログイン</title>
</head>
<body>
<div id="app">
<img :src=pictureUrl alt="profile" width="100px" align="left"/>
<h2><% displayName %></h2>
<p><% userId %></p>
<p><% statusMessage %></p>
<button @click=logout>ログアウトする</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
<script>
'use strict';
const app = new Vue({
el: '#app',
data: function(){
return{
displayName: '',
userId: '',
statusMessage: '',
pictureUrl: '',
}
},
delimiters: ["<%","%>"],
methods: {
//プロフィール取得関数
getProfile: async function(){
const accessToken = liff.getAccessToken();
const profile = await liff.getProfile();
this.displayName = profile.displayName; //名前
this.userId = profile.userId; //ID
this.pictureUrl = profile.pictureUrl; //アイコン画像
this.statusMessage = profile.statusMessage; //ステータスメッセージ
},
//ログアウト処理
logout: async function(){
if (liff.isLoggedIn()){
alert('ログアウトします。');
liff.logout();
window.location.reload();
}
},
},
//ページを開いた時に実行
mounted: async function(){
await liff.init({
liffId: 'xxxxxxxxxxxxxxxxxxx' //LIFFのID
});
//LINE内のブラウザかどうか
if(liff.isInClient()){
alert('LINE内のブラウザ');
this.getProfile(); //LINE内で開いた場合はログイン処理なし
}else{
//外部ブラウザかどうか
if(liff.isLoggedIn()){
alert('外部ブラウザ');
this.getProfile();
}else{
liff.login();
}
}
}
});
</script>
</body>
</html>
Node-RED와 LIFF 연결
메모해 둔 LIFF URL 「line://app/xxxxxxxxxxxxxxxxxxx」의 xxxxxxxxxxxxxxxxxxx 부분을 template 안의 코드에 붙여 넣는다. (아래의 xxxxxxxxxxxxxxxxxxx 부분)
templateliffId: 'xxxxxxxxxxxxxxxxxxx'
배포하고 완성! !
Node-RED로 만든 URL에 액세스하여 사용해보십시오!
결론
메모 쓰기 때문에 전해하기 어려운 부분이 있으면 죄송합니다.
어드바이스를 코멘트등으로 받을 수 있으면 도움이 됩니다.
참고 자료
LIFF v2에서 LINE 로그인, QR 스캔, LIFF에서 메시지 전송 등을 시도해보기 핸즈온 #영웅 리그
Reference
이 문제에 관하여(LINE 로그인 기능을 Node-RED로 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RyogaTakao/items/7b2649709256147c7902
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>LINE ログイン</title>
</head>
<body>
<div id="app">
<img :src=pictureUrl alt="profile" width="100px" align="left"/>
<h2><% displayName %></h2>
<p><% userId %></p>
<p><% statusMessage %></p>
<button @click=logout>ログアウトする</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
<script>
'use strict';
const app = new Vue({
el: '#app',
data: function(){
return{
displayName: '',
userId: '',
statusMessage: '',
pictureUrl: '',
}
},
delimiters: ["<%","%>"],
methods: {
//プロフィール取得関数
getProfile: async function(){
const accessToken = liff.getAccessToken();
const profile = await liff.getProfile();
this.displayName = profile.displayName; //名前
this.userId = profile.userId; //ID
this.pictureUrl = profile.pictureUrl; //アイコン画像
this.statusMessage = profile.statusMessage; //ステータスメッセージ
},
//ログアウト処理
logout: async function(){
if (liff.isLoggedIn()){
alert('ログアウトします。');
liff.logout();
window.location.reload();
}
},
},
//ページを開いた時に実行
mounted: async function(){
await liff.init({
liffId: 'xxxxxxxxxxxxxxxxxxx' //LIFFのID
});
//LINE内のブラウザかどうか
if(liff.isInClient()){
alert('LINE内のブラウザ');
this.getProfile(); //LINE内で開いた場合はログイン処理なし
}else{
//外部ブラウザかどうか
if(liff.isLoggedIn()){
alert('外部ブラウザ');
this.getProfile();
}else{
liff.login();
}
}
}
});
</script>
</body>
</html>
메모해 둔 LIFF URL 「line://app/xxxxxxxxxxxxxxxxxxx」의 xxxxxxxxxxxxxxxxxxx 부분을 template 안의 코드에 붙여 넣는다. (아래의 xxxxxxxxxxxxxxxxxxx 부분)
template
liffId: 'xxxxxxxxxxxxxxxxxxx'
배포하고 완성! !
Node-RED로 만든 URL에 액세스하여 사용해보십시오!
결론
메모 쓰기 때문에 전해하기 어려운 부분이 있으면 죄송합니다.
어드바이스를 코멘트등으로 받을 수 있으면 도움이 됩니다.
참고 자료
LIFF v2에서 LINE 로그인, QR 스캔, LIFF에서 메시지 전송 등을 시도해보기 핸즈온 #영웅 리그
Reference
이 문제에 관하여(LINE 로그인 기능을 Node-RED로 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RyogaTakao/items/7b2649709256147c7902
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
LIFF v2에서 LINE 로그인, QR 스캔, LIFF에서 메시지 전송 등을 시도해보기 핸즈온 #영웅 리그
Reference
이 문제에 관하여(LINE 로그인 기능을 Node-RED로 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RyogaTakao/items/7b2649709256147c7902텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
