LoginSignup
5
4

More than 5 years have passed since last update.

LINEログインを実装しようとしたら、CORSで弾かれた件

Posted at

Lineログインを実装していたら、CORSでうまくいきませんでした。。。
その時のやったことを備忘として記載しておきます。

やりたいこと

  • 自フォームでPOSTさせて、自サーバから結果が返ってきたらLineLogin側にGETメソッドを飛ばしてLINE LOGINさせる

自サイト→LineLoginっていう順番を崩したくなかった。

やったこと

formの登録ボタン(onclick)→js→ajaxで自サイトでの登録→ajaxでLine側へGET

function entry(myParam){
    $.ajax({
        type    : 'POST',
        url     : '/entry',
        data    : myParams
    }).done(function(data, textStatus, jqXHR) {
        // 成功時
        $.ajax({
            type    : 'GET',
            url     : 'https://access.line.me/oauth2/v2.1/authorize',
            data    : {
                        response_type: "code",
                        client_id: xxx,
                        redirect_uri: xxx,
                        state: xxx,
                        scope: "profile"
            }
        })
    });
}

実際のコードとはちょっと違いますが、
察してください。

とまあ、それで送るとこんなのが返ってくる

Access to XMLHttpRequest at 'https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=xxx&redirect_uri=https://xxx&scope=profile&_csrf=xxx' from origin 'https://myService.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ajaxで送るときのheaderにAccess-Control-Allow-Originを設定してみたけどだめ。
(相手側に設定すべき項目ですよね。今回はLineなんで諦め。)

ここみて勉強しました。
[https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f]

結論

いいのかわかりませんが、
formの登録ボタン(onclick)→js→ajaxで自サイトでの登録→jsでformのsubmitをすることで、LineへGET
とすることで、うまくいきました。

<form id="mainForm" name="mainForm" modelAttribute="mainForm" class="form" method="get" action="https://access.line.me/oauth2/v2.1/authorize">
function entry(myParam){
    $.ajax({
        type    : 'POST',
        url     : '/entry',
        data    : myParams
    }).done(function(data, textStatus, jqXHR) {
        // 成功時
        // formにパラメータをセット
        ...
        // submit
        document.mainForm.submit();
    });
}

まぁ確かに、わざわざajaxにする必要もないですね。

5
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4