リダイレクトURLとは？URLを作成しアクセストークンを受け取る方法を紹介

APIを連携するときリダイレクトURLを設定します。
初めはどうやってURLを作れば良いか分からないですよね。

自分で作るとめんどうなのですが、1度作ると他のAPIにも応用ができ大変便利です。

今回はdockerとNginxサーバーを使い、リダイレクトURLの作り方を紹介します。

リダイレクトURLとは？
リダイレクトURLの作成方法
アプリケーションにリダイレクトURLを追加する
1. リダイレクトURLで認証コードを受け取る
まとめ

リダイレクトURLとは？

リダイレクトURLとは、API認証プロセスで使用されるURLで、認証が完了した際にユーザーがリダイレクトされるアドレスを指します。

このURLはセキュリティの観点からも重要であり、認証プロセスの信頼性を保証する役割を果たします。

リダイレクトURLの作成方法

次の2つを使ってリダイレクトURLを作成します。

docker
Nginxサーバー

dockerはDocker Desktopを使います。
まだインストールが済んでいない方はインストールしておきましょう。

Docker Desktop

Dockerデスクトップは、開発者向けの共同コンテナ化ソフトウェアです。今すぐ Docker Desktop を Mac、Windows、または Linux でダウンロードしましょう。

Nginxサーバーは高性能かつ柔軟性があるウェブサーバーソフトウェアです。
NginxイメージをDocker Hubからプルして使います。

Docker

肝心のリダイレクトURL先はhttp://localhost:8080/oauth2/callbackとしましょう。

Nginxイメージをプルする

最新のNginxイメージをプルします。

docker pull nginx:latest

Nginxサーバーを起動する

イメージからコンテナを作ります。
このときlocalhostの8080ポートとNginxの80ポートをマッピングし、Nginxサーバーを起動しましょう。

docker run -d -p 8080:80 --name my-nginx nginx:latest

Docker Desktopを確認するとコンテナが作られ起動しているのが分かりますね。

Nginxサーバーにアクセスできるか確認しておきましょう。

コンテナが起動している状態でlocalhost:8080にアクセスします。
この画面が表示されれば起動成功です。

Nginxサーバーを編集する

次にリダイレクト先 /outh2/callback を作ります。

やることは2つです。

/etc/nginx/conf.d/default.conf を編集し /oauth2/callbackに遷移させる
/usr/share/nginx/html に callback.html を追加する

まずサーバーにログインしましょう。

docker exec -it my-nginx /bin/bash

このように表示が変わればログインできています。

Nginxサーバーにログインする｜クリックすると拡大します

default.confを次のように編集します。

server {
    ...
    location /oauth2/callback {
        # ここに /oauth2/callback へのリクエストを処理するための設定を追加
        # 例: プロキシ設定、静的ファイルの提供、カスタム処理など
        root   /usr/share/nginx/html;
        try_files /callback.html =404;
    }

default.conf に location /oauth2/callbackを追加する

続いて遷移したときに表示されるHTMLファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>認証成功</title>
</head>
<body>
    <h1>認証に成功しました</h1>
    <p>このページを閉じて、アプリケーションに戻ってください。</p>
</body>
</html>

以上で設定が完了しました。
Nginxコンテナを再起動してください。

アプリケーションにリダイレクトURLを追加する

リダイレクトURLが機能するか確認しましょう。

試験的にWithing APIを使います。
WithingsはヘルスケアのデジタルデバイスメーカーでAPIで体重情報を取得できます。

アプリのCallback URLにリダイレクトURLを追加しました。

リダイレクトURLで認証コードを受け取る

認証URLにもリダイレクトURLを設定します。

https://account.withings.com/oauth2_user/authorize2?response_type=code&client_id=CLIENT_ID&scope=user.info,user.metrics,user.activity&redirect_uri=http://localhost:8080/oauth2/callback&state=hoge

このURLをブラウザで実行し、アプリを許可します。