どうも、まさとらん（@0310lan）です！
今回は、多彩なWebサービスと連携可能なログイン機能を、手軽に実現してくれるサービスについてご紹介します！
ユーザー認証用の登録フォームは、GUIで簡単にカスタマイズが可能で、ReactやNext.jsなどにも対応しています。簡潔なコードでロジックを構築できるうえ、寛大な無料利用枠も提供されているので、今すぐ始められるのも魅力的です。
ご興味ある方はぜひ参考にしてください！
【 Clerk 】
■「Clerk」の使い方！
それでは、「Clerk」をどのように使えばいいのか詳しく見ていきましょう！
まずは、画面上部にある「Sign up」ボタンをクリックして、無料のユーザー登録を済ませておきます。
名前、メールアドレス、パスワードを入力して、ボタンをクリックしてください。（※GitHub, Googleアカウントでも登録可能です）
登録したメールアドレス宛に認証コードが届くので、そのコードを入力すれば完了です。
フォームの設定画面が表示されると思いますが、ひとまず画面下部の「BACK」リンクをクリックしましょう。
以下のようなダッシュボード画面が表示されたらOKです！
この画面から、新規プロジェクトの作成や管理がおこなえます。
また、公式ドキュメントにもアクセスできるので、最初に少し目を通しておくといいでしょう。
■基本的なログイン画面を作成してみよう！
それでは「Clerk」を利用して、まずは簡単なログイン画面を作りながら、基本的な操作についてご紹介していきます。
ダッシュボード画面から「＋」アイコンをクリックして、新規プロジェクトを作成しましょう。
好きなプロジェクト名を入力したら、メールアドレスとパスワードの項目に、チェックが入っていることを確認してください。
この設定により、「メールアドレス」と「パスワード」を利用して、ログインができる画面を構築できるようになります。
また、「Clerk」では、人気のSNSやWebサービスのアカウントを利用したログインにも対応しています。
2023年2月時点で、20種類近くのサービスに対応しています。
TwitterやFacebookをはじめ、Apple, Discord, GitHub, Notion, LINE…などのサービスと連携してログインできるのは便利ですね。また、ブロックチェーンを利用したサービスでよく使われる、MetaMaskによるログインも対応しています。
今回はサンプル例として、Google, Twitter, GitHubにチェックを入れてみました。最後に、画面下部のボタンをクリックします。
プロジェクトの詳細画面が表示されるので、【TRY IT NOW】ボタンをクリックしてみましょう。
すると、さきほど設定した構成でログイン画面が表示されます。
ちなみに、これは単なるプレビューではなく、このまま実際にユーザー登録も可能です。
Webサービスのアカウントを利用するか、メールアドレスとパスワードを入力すれば登録できます。
ユーザー登録ができたら、プロジェクトの左側メニューにある「Users」タブから、登録されたユーザー情報にアクセス可能です。
■Webページにログイン画面を導入しよう！
ログイン機能の準備が整ったところで、今度はどのように自作のWebページへ組み込むとよいかを詳しく見ていきましょう！
サンプル例として、今回は、Reactを使った単純なWebページを作ってみます。あらかじめ、Node.jsの開発環境を準備しておいてください。環境が整っていない方や気軽に試したい場合は、StackblitzなどのクラウドIDEを使うのがおすすめです。
まず最初に、以下のコマンドで基本的なReactの環境を用意しましょう。
$ npx create-react-app clerkapp
アプリの名前は「clerkapp」と設定しましたが、これは自分の好きな名称で構いません。
準備ができたら、ディレクトリを移動して「Cleark」のパッケージをインストールしましょう。
$ cd clerkapp $ npm install @clerk/clerk-react
念のため、ファイルの構成と、package.jsonに「Cleark」のパッケージがちゃんとインストールされていることを確認しておきましょう。
次に、APIキーの設定をおこないます。
「Clerk」では「Publishable key」と呼ばれており、プロジェクト画面から「API Keys」メニューを選択すると、確認できます。
「Publishable key」は、環境変数として設定しておきましょう。
「.env.local」という名称のファイルを、ルートディレクトリに作成し、以下のような記述を追加してください。
REACT_APP_CLERK_PUBLISHABLE_KEY=ご自身のPublishable key
これで前準備は完了です！
以下のコマンドを実行してみましょう。
$ npm start
Reactのデフォルト画面が表示されるはずです。
あとは、「Clerk」を利用したログイン機能を作っていけばいいですね！
ここからは、すでに生成されている「src/App.js」ファイルにコードを書いていきます。そこで、まずはApp.jsファイルの中身をすべて削除して、空っぽの状態にしておいてください。
次に、必要なリソースを読み込んでいくのですが、「Clerk」のログイン機能を手軽に作成するためのコントロールコンポーネントを一緒に読み込みましょう。
import React from 'react'; import './App.css'; import { ClerkProvider, SignedIn, SignedOut, UserButton, useUser, RedirectToSignIn, } from '@clerk/clerk-react';
環境変数で設定した「Publishable key」を、プログラムから利用できるように次のような記述を追記します。
const clerk_pub_key = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;
そして、実際のログイン画面を表示する部分ですが、ページに出力する要素を「Clerk」で提供されているClerkProviderでラップすることで実現します。
<ClerkProvider publishableKey={clerk_pub_key}> 【出力する要素】 </ClerkProvider>
ClerkProviderには、「Publishable key」を渡すことを忘れないようにしましょう。
実際に出力する要素に関しては、「Clerk」で提供されているコンポーネントが利用できます。もっとも簡単な例として、ログインしているかどうかによって処理を分けられる、以下の要素を使ってみましょう。
<SignedIn>...</SignedIn>
・ログインしている場合はその子要素を出力する
<SignedOut>...</SignedOut>
・ログインしていない場合はその子要素を出力する
上記を踏まえて、ログイン機能を作ると次のようになります。
function App() { return ( <ClerkProvider publishableKey={clerk_pub_key}> <SignedIn> <Hello /> </SignedIn> <SignedOut> <RedirectToSignIn /> </SignedOut> </ClerkProvider> ); } export default App;
ログインしている場合は、このあと作成する「Hello」コンポーネントを出力して、そうでない場合は「RedirectToSignIn」コンポーネントを出力するという単純な構成です。
ちなみに、「RedirectToSignIn」は、「Clerk」のログイン画面を表示するという意味になります。
最後に。ログインした場合に出力する「Hello」コンポーネントを作っておきましょう！
ページの内容としては、単純に「Hello, ◯◯!!!」という感じで、ユーザー名と一緒にテキストを出力するだけにしておきます。
そこで、ログイン画面にユーザー名を入力する項目を追加しておく必要があります。プロジェクト画面から、「User & Authentication」メニューを開いて、ユーザー名の項目をONにしておきましょう。
ユーザー名の取得とテキストの出力は次のようなコードになります。
function Hello() { const { user } = useUser(); return ( <div className="App-header"> <UserButton /> <h1>Hello, {user.username}!!!</h1> </div> ); }
「UserButton」コンポーネントも、「Clerk」から提供されているもので、ユーザー専用のアバターアイコンを提供してくれるのが便利です。
基本的なプログラムは、これで完了です！
以下のコマンドを実行してみましょう。
$ npm start
最初にログイン画面が表示されます。
初回は、まだユーザー登録をしていないので、下部にある「Sign up」をクリックしましょう。
ユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを設定します（※今回はユーザー名をsampleuserとしました）。
登録されたメールアドレス宛に認証コードが届くので、コピーして貼り付けましょう。
認証が完了すると、次のようなページが表示されるはずです！
上部にあるアバターアイコンをクリックすると、ユーザーの管理画面が表示されます。
ここからログアウトもできます。
また、アカウントの管理画面にもアクセスが可能で、ユーザー名やパスワードの変更をしたり、アバター画像をアップロードしたりする機能もあります。
このようにシンプルなプログラムで、多機能なログイン機能を簡単に構築できるのが、「Clerk」の大きな特徴と言えるでしょう。
ちなみに、本番環境で利用する場合は、「Clerk」の開発モード(Development)からプロダクションモード(Production)へ切り替えて、DNSの設定などをおこなえます。
■便利なカスタマイズ機能について！
「Clerk」では、マウス操作だけでログインに便利な機能を簡単にカスタマイズできるので、合わせてご紹介しておきます。
プロジェクト画面の左側メニューにある「User & Authentication」タブには、さまざまなWebサービスと連携したログイン機能を、1クリックで導入できる機能があります。
冒頭でもご紹介しましたが、およそ20種類以上のサービスと連携が可能になります。
さらに、「Password」の項目をOFFにするだけで、パスワードレスなログインを簡単に実現できる機能もあります。
ログインする際には、登録したメールアドレス宛に認証コードが送付されるので、それを利用してログインできます。
また、「Customization」タブには、ログインフォームに独自のロゴ画像などを追加できる機能も提供されています。
メールの設定画面では、自動配信される認証コードのメール内容を自由に編集することも可能です。
他にも、カスタムテーマやアナリティクス＆Webhookなどの設定も可能なので、自由度の高いオリジナル要素も簡単に作成できます。
スマホでできる謎解きゲーム『IT謎解き2』を公開！
『IT謎解き』の第二弾となる『IT謎解き2』は、全問paiza完全オリジナルの謎解きゲームです。
IT謎解きは、IT業界で活躍するために必要となる発想力・推理力・分析力・耐久力などを問う新感覚謎解きです。今回は、「ゲーム世界からの脱出」というテーマでIT業界力・IT知識を問う謎を出題しています。
みなさんのITに関する知識、分析力や論理的思考力などを駆使して、ぜひチャレンジしてみてください。
詳しくはこちら
■まとめ
今回は、JavaScriptで簡単にログイン機能を実現してくれるサービスについてご紹介しました。
「Clerk」はユーザー認証機能を手軽にしてくれるだけでなく、ユーザーの管理についても簡単にしてくれるサービスです。個人開発だけでなく、小規模なWebサービスにも安心して活用できるはずです。
今回ご紹介した内容は、すべて無料で利用できるので、ぜひみなさんも独自のログイン機能を実装してみてください！
＜参考リンク＞
・「Clerk」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
