ユーザーがAPIキーを確認できる画面を作る

WordPressでは、ユーザーごとにAPIキーを発行することができます。この記事では、ログインしたユーザーが自分のAPIキーを確認できるようにする方法について解説します。この方法を使うと、ユーザーが自分のAPIキーをページ上で簡単に確認できるようになります。

ユーザーAPIキー確認用のテンプレート作成
コードの解説
スタイルの追加
ユーザーがAPIキーを確認する流れ
まとめ

ユーザーAPIキー確認用のテンプレート作成

まず、以下のコードをWordPressのテーマに追加して、ユーザーがAPIキーを確認できるページを作成します。このコードは、ユーザーがログインしている場合にAPIキーを表示し、ログインしていない場合にはログインフォームを表示します。

<?php
/**
 * Template Name: ユーザーログイン＆APIキー確認
 */
get_header();
?>

<div class="login-container">
    <?php
    if (is_user_logged_in()) {
        // ユーザーがログイン済みの場合
        $user = wp_get_current_user();
        $api_key = get_user_meta($user->ID, 'api_key', true);
        ?>

        <h2>ようこそ, <?php echo esc_html($user->display_name); ?> さん</h2>
        <p>あなたのAPIキー：</p>
        <input type="text" value="<?php echo esc_attr($api_key); ?>" readonly>

        <form method="post">
            <input type="hidden" name="action" value="logout">
            <button type="submit" class='btn'>ログアウト</button>
        </form>

    <?php
    } else {
        // ユーザーがログインしていない場合
        if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'login') {
            $username = sanitize_user($_POST['username']);
            $password = $_POST['password'];
            $remember = isset($_POST['remember']);

            $user = wp_signon(array(
                'user_login'    => $username,
                'user_password' => $password,
                'remember'      => $remember,
            ), false);

            if (is_wp_error($user)) {
                echo '<p style="color:red;">ログインに失敗しました。ユーザー名またはパスワードが間違っています。</p>';
            } else {
                // リダイレクト
                wp_redirect(get_permalink());
                exit;
            }
        }
        ?>

        <h2>ログイン</h2>
        <form method="post">
            <p>
                <label for="username">ユーザー名</label><br>
                <input type="text" name="username" id="username" required>
            </p>
            <p>
                <label for="password">パスワード</label><br>
                <input type="password" name="password" id="password" required>
            </p>
            <p>
                <input type="checkbox" name="remember" id="remember">
                <label for="remember">ログイン情報を記憶する</label>
            </p>
            <input type="hidden" name="action" value="login">
            <p>
                <input type="submit" value="ログイン">
            </p>
        </form>

    <?php } ?>
</div>

<?php get_footer(); ?>

コードの解説

このテンプレートには、以下の主要な部分があります：

ユーザーがログインしている場合：
ユーザーがログインしている場合、wp_get_current_user()で現在のユーザー情報を取得し、そのユーザーのAPIキーをget_user_meta()で取得します。
取得したAPIキーは、<input>タグを使って読み取り専用で表示します。

php $api_key = get_user_meta($user->ID, 'api_key', true);

ユーザーがログインしていない場合：
ログインしていない場合、ログインフォームが表示されます。
フォームから送信されたデータをwp_signon()を使用して検証し、ログインを試みます。ログインに成功した場合は、現在のページにリダイレクトされ、APIキーの確認ページが表示されます。

php $user = wp_signon(array( 'user_login' => $username, 'user_password' => $password, 'remember' => $remember, ), false);

ログアウト機能：
ログイン後、ユーザーは「ログアウト」ボタンをクリックすることでログアウトできます。wp_logout()を使ってログアウト処理を行うことができます。

スタイルの追加

このテンプレートでは、ログインフォームとAPIキーの表示部分をシンプルに構成しています。次に、以下のようなCSSをテーマのstyle.cssファイルに追加して、デザインを整えます。

.login-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-container p {
    margin-bottom: 10px;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

.login-container input[type="submit"],
.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-container input[type="submit"]:hover,
.login-container button:hover {
    background-color: #005f7f;
}