LINEログインapiになげたPOSTリクエストが返ってこない

Question

前提・実現したいこと

初学者です。
VueとGoでWebアプリを作っています。
https://developers.line.biz/ja/docs/line-login/integrate-line-login/#making-an-authorization-request
LINEログインapiを使用してログイン機能を実装しようとしているところです。

上記URLのLINEログインapiへリクエストをなげて、アクセストークンを取得するところがゴールです。
認可コードは取得できましたが、それを使用してアクセストークンを取得するPOSTリクエストがうまく動作しません。

発生している問題・エラーメッセージ

axiosを使用してPOSTリクエストを送るところで400が返ってきてしまう

(console)
POST https://api.line.me/oauth2/v2.1/token 400 (Bad Request)

(response)
{"error":"invalid_grant","error_description":"invalid authorization code"}

該当のソースコード

data: function () {
        return {
            // LNEapiからの認可コード
            code: ""
        }
    },
methods: {
fetchCode() {
            if(this.$route.query.code != null) {
                this.code = this.$route.query.code;
            }
        },
 fetchAccessToken(){
            var vue = this;
            var params = new URLSearchParams()
                params.append('grant_type', 'authorization_code')
                params.append('code', vue.code)
                params.append('redirect_uri', 'http://localhost:8080/login')
                params.append('client_id', //LINEに書いてあるID)
                params.append('client_secret', //LINEに書いてあるID)
            axios
                .post('https://api.line.me/oauth2/v2.1/token', params)
                .then(response => (console.log(response)))
        },
},
created() {
        this.fetchCode()
        this.fetchAccessToken()
},

試したこと

• リクエストボディの内容が登録している内容と一致しているか確認した
• Content-Typeに合わせた記述になっているか確かめた
• 再度ログインして、認可コードを再発行してみた（有効期限確認のため）

エラーメッセージのinvalid authorization code とは　認可コードがあっていないということでしょうか？
400が返ってきているので、リクエストの内容が間違っているところまでは検討がつくのですが...
教えて下さい！

Answer 1

こういうログインは基本的にサーバーサイドから使うもの。
ブラウザのJSからは使えない。

こうやってsecretを書くと他の人から見えるのでありえない。
「フロントのコードは外から見える」は何よりも先に覚えること。

params.append('client_id', //LINEに書いてあるID)
params.append('client_secret', //LINEに書いてあるID)

LINEに限定すればフロントから使う方法はあるかもしれない。
https://developers.line.biz/ja/docs/liff/

Comments

[cat214]

ありがとうございます
バックエンド側でPOSTリクエストを作成したらうまくいきました
フロント側のコードは見える大原則、胸に刻みます！