Node-RED에서 LIFF를 움직여 보았습니다.
이번 흐름
이번에는 LINE 앱에서 LIFF를 열면 자동 로그인하여 화면에 LINE 사용자 이름이 표시될 뿐입니다. Node-RED에서 다음 JSON을 가져와 사용하십시오.
[
{
"id": "b59bc4d3.917488",
"type": "tab",
"label": "フロー 1",
"disabled": false,
"info": ""
},
{
"id": "49eeb9d7.b013e8",
"type": "http in",
"z": "b59bc4d3.917488",
"name": "",
"url": "/liffv2",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 160,
"y": 120,
"wires": [
[
"ccb5bcbe.5d6bf"
]
]
},
{
"id": "e184963c.01a588",
"type": "http response",
"z": "b59bc4d3.917488",
"name": "",
"statusCode": "",
"headers": {},
"x": 690,
"y": 120,
"wires": []
},
{
"id": "80b9e0e4.c75be",
"type": "template",
"z": "b59bc4d3.917488",
"name": "v2",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n <head>\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>LIFF Starter</title>\n </head>\n <body>\n <h1 id=\"displaynamefield\"></h1>\n\n {{!--load LIFF SDK--}}\n <script src=\"https://static.line-scdn.net/liff/edge/2.1/sdk.js\"></script>\n <script>\n var userId = \"\";\n window.onload = function() {\n initializeLiff(\"{{payload}}\");\n };\n \n function initializeLiff(myLiffId) {\n liff\n .init({\n liffId: myLiffId\n })\n .then(() => {\n // start to use LIFF's api\n liff.getProfile().then(function(profile) {\n document.getElementById('displaynamefield').textContent = 'ようこそ' + profile.displayName + 'さん';\n userId = profile.userId;\n }).catch(function(error) {\n window.alert('Error getting profile: ' + error);\n })\n })\n .catch((err) => {\n document.getElementById('displaynamefield').textContent = \"LINEアプリで開いてください。\";\n });\n }\n </script>\n </body>\n</html>",
"output": "str",
"x": 550,
"y": 120,
"wires": [
[
"e184963c.01a588"
]
]
},
{
"id": "ccb5bcbe.5d6bf",
"type": "change",
"z": "b59bc4d3.917488",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "1653453273-3ybAnYe0",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 360,
"y": 120,
"wires": [
[
"80b9e0e4.c75be"
]
]
}
]
배포하고 브라우저에서 【Node-REDのURL】/liffv2를 열면 다음 화면이 출력됩니다. LIFF의 설정을 하지 않기 때문에, 이 시점에서는 LINE의 유저명이 출력되지 않습니다. 이 URL에서 LIFF를 설정하므로 미리 메모해 둡시다.
LIFF URL 생성
LIFF v2에서 LIFF를 이동하려면 LIFF URL에 포함된 LIFF ID를 이동하는 응용 프로그램으로 설정해야 합니다. 그래서 LIFF를 움직이는 LINE bot 채널을 준비합니다. 여기 을 참고로 작성한 후, LIFF 탭을 열고 방금 메모한 URL을 엔드포인트 URL( 【Node-REDのURL】/liffv2 )에 복사합니다. 이 때 URL은 HTTPS로 입력하십시오. 그 이외에 항목이 있습니다만, 이번은 프로필명을 표시하므로, Scope 의 란의 Profile 에는 체크 넣어 주세요. 그 이외는 좋아하는 설정으로 괜찮습니다.
작성 버튼을 누르면 LIFF 목록이 출력됩니다. 이전 URL을 기록해 둡시다.
Node-RED 측 설정
앞서 준비한 플로우 안의 Change 노드(왼쪽에서 2번째의 노드)를 열어, 앞서 메모한 LIFF URL중, line://app/ 이후의 캐릭터 라인을 msg.payload에 대입시킵니다. 이 문자열이 앱 내에서 정의되어야 하는 LIFF ID입니다.
동작 확인
그럼, 동작 확인입니다. 이전 LINE bot를 친구에게 추가하고 메시지에 LIFF URL을 게시합니다. 스마트 폰의 LINE 앱에서 게시 한 링크를 탭하여 LIFF를 시작하십시오. iPhone에 사전 설치된 메모장 앱을 작성한 URL에서도 열 수 있습니다. 최초의 기동시에는 권한의 허가가 요구되므로, 허가해 둡시다.
허용하면 탭이 시작되고 사용자 이름이 화면에 표시되면 성공합니다.
이번에는 LIFF 앱을 Node-RED로 만들어 보았습니다. 이제 사용자 인증을 프런트 엔드에서 수행할 수 있으며, Node-RED와 같이 세션을 사용할 수 없는 개발 환경에서도 인증 앱을 만들 수 있습니다. 브라우저에서도 움직일 수 있도록 설정할 수 있으므로, 마음이 맞으면 대응시켜 보려고 생각합니다.
브라우저 대응시킨 LIFF는, 속편으로서 여기 로 정리하고 있습니다.
Reference
이 문제에 관하여(Node-RED에서 LIFF를 움직여 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/KMiura95/items/f52a3ab3e65f93334bdd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
[
{
"id": "b59bc4d3.917488",
"type": "tab",
"label": "フロー 1",
"disabled": false,
"info": ""
},
{
"id": "49eeb9d7.b013e8",
"type": "http in",
"z": "b59bc4d3.917488",
"name": "",
"url": "/liffv2",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 160,
"y": 120,
"wires": [
[
"ccb5bcbe.5d6bf"
]
]
},
{
"id": "e184963c.01a588",
"type": "http response",
"z": "b59bc4d3.917488",
"name": "",
"statusCode": "",
"headers": {},
"x": 690,
"y": 120,
"wires": []
},
{
"id": "80b9e0e4.c75be",
"type": "template",
"z": "b59bc4d3.917488",
"name": "v2",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n <head>\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>LIFF Starter</title>\n </head>\n <body>\n <h1 id=\"displaynamefield\"></h1>\n\n {{!--load LIFF SDK--}}\n <script src=\"https://static.line-scdn.net/liff/edge/2.1/sdk.js\"></script>\n <script>\n var userId = \"\";\n window.onload = function() {\n initializeLiff(\"{{payload}}\");\n };\n \n function initializeLiff(myLiffId) {\n liff\n .init({\n liffId: myLiffId\n })\n .then(() => {\n // start to use LIFF's api\n liff.getProfile().then(function(profile) {\n document.getElementById('displaynamefield').textContent = 'ようこそ' + profile.displayName + 'さん';\n userId = profile.userId;\n }).catch(function(error) {\n window.alert('Error getting profile: ' + error);\n })\n })\n .catch((err) => {\n document.getElementById('displaynamefield').textContent = \"LINEアプリで開いてください。\";\n });\n }\n </script>\n </body>\n</html>",
"output": "str",
"x": 550,
"y": 120,
"wires": [
[
"e184963c.01a588"
]
]
},
{
"id": "ccb5bcbe.5d6bf",
"type": "change",
"z": "b59bc4d3.917488",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "1653453273-3ybAnYe0",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 360,
"y": 120,
"wires": [
[
"80b9e0e4.c75be"
]
]
}
]
LIFF v2에서 LIFF를 이동하려면 LIFF URL에 포함된 LIFF ID를 이동하는 응용 프로그램으로 설정해야 합니다. 그래서 LIFF를 움직이는 LINE bot 채널을 준비합니다. 여기 을 참고로 작성한 후, LIFF 탭을 열고 방금 메모한 URL을 엔드포인트 URL(
【Node-REDのURL】/liffv2 )에 복사합니다. 이 때 URL은 HTTPS로 입력하십시오. 그 이외에 항목이 있습니다만, 이번은 프로필명을 표시하므로, Scope 의 란의 Profile 에는 체크 넣어 주세요. 그 이외는 좋아하는 설정으로 괜찮습니다.작성 버튼을 누르면 LIFF 목록이 출력됩니다. 이전 URL을 기록해 둡시다.
Node-RED 측 설정
앞서 준비한 플로우 안의 Change 노드(왼쪽에서 2번째의 노드)를 열어, 앞서 메모한 LIFF URL중, line://app/ 이후의 캐릭터 라인을 msg.payload에 대입시킵니다. 이 문자열이 앱 내에서 정의되어야 하는 LIFF ID입니다.
동작 확인
그럼, 동작 확인입니다. 이전 LINE bot를 친구에게 추가하고 메시지에 LIFF URL을 게시합니다. 스마트 폰의 LINE 앱에서 게시 한 링크를 탭하여 LIFF를 시작하십시오. iPhone에 사전 설치된 메모장 앱을 작성한 URL에서도 열 수 있습니다. 최초의 기동시에는 권한의 허가가 요구되므로, 허가해 둡시다.
허용하면 탭이 시작되고 사용자 이름이 화면에 표시되면 성공합니다.
이번에는 LIFF 앱을 Node-RED로 만들어 보았습니다. 이제 사용자 인증을 프런트 엔드에서 수행할 수 있으며, Node-RED와 같이 세션을 사용할 수 없는 개발 환경에서도 인증 앱을 만들 수 있습니다. 브라우저에서도 움직일 수 있도록 설정할 수 있으므로, 마음이 맞으면 대응시켜 보려고 생각합니다.
브라우저 대응시킨 LIFF는, 속편으로서 여기 로 정리하고 있습니다.
Reference
이 문제에 관하여(Node-RED에서 LIFF를 움직여 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/KMiura95/items/f52a3ab3e65f93334bdd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
그럼, 동작 확인입니다. 이전 LINE bot를 친구에게 추가하고 메시지에 LIFF URL을 게시합니다. 스마트 폰의 LINE 앱에서 게시 한 링크를 탭하여 LIFF를 시작하십시오. iPhone에 사전 설치된 메모장 앱을 작성한 URL에서도 열 수 있습니다. 최초의 기동시에는 권한의 허가가 요구되므로, 허가해 둡시다.
허용하면 탭이 시작되고 사용자 이름이 화면에 표시되면 성공합니다.
이번에는 LIFF 앱을 Node-RED로 만들어 보았습니다. 이제 사용자 인증을 프런트 엔드에서 수행할 수 있으며, Node-RED와 같이 세션을 사용할 수 없는 개발 환경에서도 인증 앱을 만들 수 있습니다. 브라우저에서도 움직일 수 있도록 설정할 수 있으므로, 마음이 맞으면 대응시켜 보려고 생각합니다.
브라우저 대응시킨 LIFF는, 속편으로서 여기 로 정리하고 있습니다.
Reference
이 문제에 관하여(Node-RED에서 LIFF를 움직여 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KMiura95/items/f52a3ab3e65f93334bdd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
