このプラグインでできることサイトに専用のボタンを1つ置くだけで、訪れた人が「Karotterのアカウント」でそのままログインしたり、新しく会員登録したりできるようになります。パスワードを新しく覚えてもらう必要がありません。

はじめる前に、3つだけ確認してください

  • Karotterのアカウントを持っていること
  • ご自身のWordPressサイトの管理画面(通常は「あなたのサイトURL/wp-admin」)にログインできること
  • 手元に5分ほどの時間があること

手順1: Karotter側で「合言葉」を発行する

まずKarotter側の設定ページで、あなたのサイト専用の「合言葉」(専門的には「Client ID」「Client Secret」と呼びます)を発行します。これはあなたのサイトとKarotterが安全にやり取りするための、2つで1組のパスワードのようなものです。

1

Karotterの「OAuthアプリ」メニューを開く

Karotterにログインした状態で設定ページに進み、「OAuthアプリを作成」を選びます。

2

フォームに入力する

アプリ名(サイト名でかまいません)と、下記の「リダイレクトURI」をそのまま貼り付けます。「機密クライアント」には必ずチェックを入れてください。

3

発行された文字列をコピーする

作成が完了すると「Client ID」と「Client Secret」という2つの文字列が表示されます。この画面はまだ閉じずに、次の手順に進んでください。

Karotter — OAuthアプリを作成
わたしのサイト
https://あなたのサイト/wp-json/karotter-login/v1/callback
☑ サーバー側でclient_secretを保持できるアプリ向け
作成する

リダイレクトURIとは「ログインが終わったら、この住所に戻ってきてください」という戻り先の住所です。ご自身のプラグイン設定画面に表示されるものを、そのままコピーして貼り付ければ問題ありません。

手順2: プラグインをサイトに追加する

ダウンロードして下さい→
1

WordPressの管理画面を開く

左側のメニューから「プラグイン」→「新規追加」→「プラグインのアップロード」と進みます。

2

ZIPファイルを選んで有効化する

ダウンロードしたZIPファイルを選択して「今すぐインストール」、続けて「有効化」を押します。

手順3: 合言葉を貼り付ける

左メニューに新しく「Karotter Login」が追加されます。開いて「設定」タブに、手順1で控えたClient IDとClient Secretを貼り付け、「設定を保存」を押してください。

Karotter Login — 設定
••••••••••••••••
••••••••••••••••
設定を保存

手順4: ボタンをページに置く

設置方法は2通りあります。どちらか使いやすい方をお選びください。

ブロックエディタを使う場合

  1. ボタンを置きたい固定ページや投稿を編集画面で開きます
  2. 「+」ボタンを押し、「Karotter」と入力して検索します
  3. 出てきた「Karotterログイン/登録ボタン」を選ぶと、その場でボタンのイメージが表示されます
  4. 右側のパネルで「ログイン」か「アカウント登録」かを選び、ページを更新すれば完了です

文字を貼り付ける場合(ショートコード)

ボタンを置きたい場所に、次の一行を貼り付けるだけでも設置できます。

貼り付ける文字
[karotter_login mode="login"]

うまくいったか確認する

設置したボタンを実際にクリックしてみましょう。Karotterの画面に切り替わり、許可すると自動的にあなたのサイトに戻ってログイン状態になれば成功です。

こまったときは

エラー画面が出てログインできない

手順1で登録した「リダイレクトURI」と、プラグイン設定画面に表示されている住所が一字一句同じかを確認してください。コピー&ペーストするのが一番確実です。

「設定されていません」と表示される

Client IDまたはClient Secretが未入力、あるいは貼り付けの際に余分な空白が入っている可能性があります。もう一度コピーし直してみてください。

ボタンを押しても何も起きない

キャッシュ系のプラグインをお使いの場合、ページのキャッシュを一度削除してから再度お試しください。

ここまでで設置は完了ですより詳しい技術的な内容(APIの仕組みなど)を知りたい方は、トップページの「仕組み」セクションもあわせてご覧ください。