LINE Notifyで認証画面を作成する

LINE Notifyで認証画面を作成する

LINE Notifyで認証画面を作成する

LINE NotifyのAPIを使用して認証画面を作成してみます。

登録サービス管理

「登録サービス管理」をクリックしてサービスを作成します。

「サービスを登録する」をクリックします。

必須項目を入力して「同意して次に進む」をクリックします。

「登録する」をクリックします。これで登録完了です。

Client ID、Client Secretが取得出来ていることが確認できます。

認証の仕組み

LINE Notifyの認証の仕組みです。

LINE Notify

GETのAPIでcodeが取得できます。
1.で取得したcodeをパラメータとしてcallback urlでPOSTのAPIを叩きます。これでアクセストークンが取得できます。
アクセストークンさえ取得してしまえば、APIのヘッダ情報（Bearerトークン）に指定して通知系のAPIが使えるようになります。

https://notify-bot.line.me/oauth/authorize (GET)

ログイン画面を表示するAPIをnode.jsで作成してみます。

node.jsのaxiosでgetしてみます。

index.js

const axios = require('axios');
const qs = require('querystring');
const BASE_URL = 'https://notify-bot.line.me';
const PATH = '/oauth/authorize';

const config = {
  baseURL: BASE_URL,
  url: PATH,
  method: 'get',
  headers: {},
  params: qs.stringify({
    response_type: `code`,
    client_id: `nKWQreA8WGs5wyBJU76bTa`,
    redirect_uri: `https://example.com/cb.php`, // callback url ログイン後リダイレクトされる画面
    scope: `notify`,
    state: `fdasfadsfasd`
  })
};

(async () = > {
  const response = await axios.request(config);
  console.log(response.data)
})();

HTMLが出力されます。このAPIからログイン画面をレンダリングすることが出来ます。

ログイン画面 index.html

index.htmlにaタグにこのAPIのURLを指定すればLINEログイン画面に遷移します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LINE</title>
</head>
<body>
<h1>Login with LINE</h1>
<a href="https://notify-bot.line.me/oauth/authorize?response_type=code&client_id=nKWQreA8WGs5wyBJU76bTa&redirect_uri=https://example.com/cb.php&scope=notify&state=hoge">Login with LINE</a>
</body>
</html>

こんな感じです。

callback url cb.php

「登録サービス管理」のcallback urlで指定したURLを実装します。

callback urlはhttps://example.com/cb.phpに指定した為、cb.phpというファイルを作成します。

cb.php

<?php
  $code = $_GET['code']; // code

  $data = array(
    "grant_type" => "authorization_code",
    "code" => $code,
    "redirect_uri" => "https://uperworld.com/line/cb.php",
    "client_id" => "bJSIyjA8WGs8wyHBX76bVe",
    "client_secret" => "0M9IkdBdzw4f8DpBExgfqm2aqzx1ja1aQbjesVbfwwA",
    "state" => "aaa"
  );
  $data = http_build_query($data, "", "&");

  $header = array(
    "Content-Type:application/x-www-form-urlencoded",
    "Content-Length: ".strlen($data)
  );

  $context = array(
    "http" => array(
      "method" => "POST",
      "header" => $header,
      "content" => $data,
      'ignore_errors' => true,
      'protocol_version' => '1.1',
      'ssl' => array(
        'verify_peer' => false,
        'verify_peer_name' => false
      )
    )
  );

  $url = "https://notify-bot.line.me/oauth/token"; // API

  $json = @file_get_contents($url, false, stream_context_create($context));
  $arr = json_decode($json);
  $accessToken = $arr->access_token;
  session_start();
  $_SESSION['accessToken'] = $accessToken; // アクセストークンをセッションに保持
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LINE</title>
</head>
<body>
<h1>認証OK</h1>
<h4>メッセージ送信</h4>
<form method="POST" action="post.php">
<input type="text" name="message" value="" />
<button type="submit">送信</button>
</form>
</body>
</html>

コールバックURLの画面はこんな感じです。この画面でテキスト入力して「送信」を押せばpost.phpがpostで実行されますのでLINE通知されます。

post.php

post.phpでLINE通知したいテキストを受け取り、LINE通知を行います。

<?php
  session_start();
  $message = $_POST['message'];

  $data = array(
    'message' => $message
  );
  $data = http_build_query($data, '', '&');

  $header = array(
    'Content-Type: application/x-www-form-urlencoded',
    'Authorization:Bearer '.$_SESSION['accessToken'], // Bearerトークン
    'Content-Length: '.strlen($data)
  );

  $context = array(
    'http' => array(
      'method' => 'POST',
      'header' => $header,
      'content' => $data,
      'ignore_errors' => true,
      'protocol_version' => '1.1',
      'ssl' => array(
        'verify_peer' => false,
        'verify_peer_name' => false
      )
    )
  );

  $url = 'https://notify-api.line.me/api/notify';

  $json = @file_get_contents($url, false, stream_context_create($context));
?>

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<title>LINE</title>
</head>
<body>
<h1>送信OK</h1>
<form method="POST" action="post.php">
<input type="text" name="message" value="" />
<button type="submit">送信</button>
</form>
</body>
</html>

アクセストークンをセッションに保持しました。

これでログイン画面でログイン後に何回も通知することができます。（1時間に可能なAPI Callはデフォルト1000回）

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

LINE Notifyで認証画面を作成する

登録サービス管理

認証の仕組み

https://notify-bot.line.me/oauth/authorize (GET)

ログイン画面 index.html

callback url cb.php

post.php

関連

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る