LINEログイン機能の実装

LINEログイン機能を以下のサイトを参考に作っています。

LINEのロゴをクリックすると、認証画面への切り替え、その後リダイレクトされた画面でユーザー情報が表示される、というものです。

しかしながら、認証画面への切り替えと、その後のリダイレクトがなされず、全く動かない状態です。

以下のようなエラーが出ています・・・が対処の仕方がわかりません。。。

undefined ERROR Uncaught Exception

{
"errorType": "Runtime.HandlerNotFound",
"errorMessage": "index.handler is undefined or not exported",
"stack": [
"Runtime.HandlerNotFound: index.handler is undefined or not exported",
" at Object.module.exports.load (/var/runtime/UserFunction.js:144:11)",
" at Object.<anonymous> (/var/runtime/index.js:43:30)",
" at Module._compile (internal/modules/cjs/loader.js:1063:30)",
" at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)",
" at Module.load (internal/modules/cjs/loader.js:928:32)",
" at Function.Module._load (internal/modules/cjs/loader.js:769:14)",
" at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)",
" at internal/main/run_main_module.js:17:47"
]
}

記事が2019年11月と少し古いことと、私自身プログラミング初心者ということもあり、そもそも実装できないのか、それとも単純に間違えているだけなのかの判断が出来ずにいます。

アドバイスいただけませんでしょうか。どうぞよろしくお願い致します。

----機能実装の流れ----

１．ログインボタンを作る　
２．LINEにチャネルを作る　
３．認証後のページを作成
４．Lambda関数を作成
５．HTMLのログインボタンのリンク　
６．LINE認証ページからLINE認証後のページへのURLを設定　

----気になっている点----
エラーの内容から考えて、以下の記事と関係ありそうですが、何をどうすれば良いのかわかりません。　⇒　ハンドラが見つからず、index.jsを実行できない

----Lambda関数（index.jsファイル）----

JavaScript
1var request = require('request');
2exports.handler = async(event) => {
3  var token = await postRequest(
4    'https://api.line.me/oauth2/v2.1/token',
5    {
6      'grant_type': 'authorization_code',
7      'code': event.queryStringParameters.code,
8      'redirect_uri': 'https://iemkbzsbl6.execute-api.ap-northeast-1.amazonaws.com/default/20210518linetest',
9      'client_id': 'ここにチャネルIDを入れています',
10      'client_secret': 'ここにチャネルシークレットを入れています'
11    }
12  );
13  var tokenBody = JSON.parse(token.httpResponse.body);
14  const response = {
15    statusCode: 200,
16    headers: {'content-type': 'text/html; charset=utf-8'},
17    body: `<!DOCTYPE html>
18<html lang="ja">
19  <head>
20    <meta charset="utf-8">
21    <title>Login</title>
22  </head>
23  <body>
24    <h3>json</h3>
25    <textarea>${JSON.stringify({event: event, token: token, tokenBody: tokenBody})}</textarea>
26  </body>
27</html>
28`
29  };
30  return response;
31};
32 
33var postRequest = (url, form) => {
34  return new Promise((resolve) => {
35    request.post(
36      {url: url, form: form},
37      (err, httpResponse, body) => {
38        resolve({
39          err: err,
40          httpResponse: httpResponse,
41          body: body
42        });
43      }
44    );
45  });
46};

----login.htmlファイル----
実際に書いたコードです。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>Login</title>
6    </head>
7    <body>
8        <a href="https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=チャネルIDを入れています
9&redirect_uri=https%3A%2F%2Fiemkbzsbl6.execute-api.ap-northeast-1.amazonaws.com%2Fdefault%2F20210518linetest&scope=profile%20openid"><img src="LineLoginButtonImage/images/DeskTop/2x/44dp/btn_login_base.png"/></a>
10    </body>
11</html>

行動規範の内容に同意します

回答1件

ベストアンサー

来ました笑

ちなみに、今何で書かれてますか？
素のHTMLとJSで書かれています？

もし素のHTMLやJSだと色々と面倒も多いので、
読み込むだけで使えるVueや、一緒に使うと見た目が綺麗なvuetifyも使ってあげるとかなり楽になると思います。

HTML1つだけでVueとVuetifyが試せるテンプレート

すみません。。。ほとんど素のhtml書くことがないので
変なところがあったらご指摘ください。

こちらで確認しまして、以下のコードだけのhtml１ファイルでlineログインが
実装できます。

html
1<html>
2<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
3
4<body>
5    <!--ログインのボタン　ロゴ画像の変わりです。-->
6    <input type="button" value="ログイン" onclick="lineLogin()">
7    　
8
9</body>
10
11
12<script>
13    function lineLogin() {
14        liff
15            .init({
16                liffId: "***", //[todo]　IDを入力してください。
17            })
18            .then(async () => {
19                //ログイン状態のチェック
20                if (liff.isLoggedIn()) {
21                    //ログイン済みの場合
22                    liff
23                        .getProfile()
24                        .then(async function (profile) {
25
26                            //これがログインユーザのデータ
27                            var lineUserData = {
28                                id: profile.userId,
29                                name: profile["displayName"],
30                            };
31                        })
32                        .catch((err) => {
33                            console.log(err);
34                        });
35                } else {
36
37                    //未ログインの場合
38                    liff.login({
39                        redirectUri: "***"
40                    }); //[todo] LINE Login settings に設定したCallback URLと同じURLを入れる
41                }
42            })
43            .catch((err) => {
44                console.log(err);
45            });
46    }
47</script>
48
49</html>
50

投稿2021/05/18 16:07

編集2021/05/19 10:05

Tatsunosuke

総合スコア599

turbo3681

2021/05/19 02:54

ありがとうございます！！！！！一発でログイン機能が動きました。ちょっと信じられません・・・。ここ数日はいろいろ調べまくってもずっとできず、どうしたもんかと途方に暮れていたので、その時間は何だったんだろうかと。。。笑教えていただいたコードをしっかり復習して応用できるように力をつけていきたいと思います。助けていただいて本当に感謝しています。 LINE関係で実装したい機能がいくつかありますので、またアドバイスいただけましたらとても心強いです。引き続きどうぞよろしくお願い致します。

turbo3681

2021/05/19 02:58

追記になりますが、コードは素のHTMLとJSのみで書いていました。 Vueは聞いたことがある程度、vuetifyは初めて聞きました。作業効率が上がり、きれいに仕上がるのならやるべきですね。教えていただいた情報を足掛かりに勉強していきたいと思います。