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

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

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

登録サービス管理

LINE Notify+node.jsで認証を行う

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

LINE Notify+node.jsで認証を行う

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

LINE Notify+node.jsで認証を行う

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

LINE Notify+node.jsで認証を行う

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

LINE Notify+node.jsで認証を行う

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

認証の仕組み

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

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

LINE Notify
LINE Notify allows you to send web notifications from GitHub, IFTTT, Mackerel, and more directly to your LINE chats.
  1. GETのAPIでcodeが取得できます。
  2. 1.で取得したcodeをパラメータとしてcallback urlでPOSTのAPIを叩きます。これでアクセストークンが取得できます。
  3. アクセストークンさえ取得してしまえば、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>

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

こんな感じです。

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>

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

コールバック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>

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

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

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

コメント

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

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました