どうも、まさとらん（@0310lan）です！
今回は、ごく普通の静的なWebサイトにユーザー認証機能を手軽に組み込める無料のサービスをご紹介します。
特に難しいプログラミングは必要なく、単純なHTMLの属性を付与するだけで誰でも簡単に高度な認証機能を実装できるのが大きな特徴です。
また、ログインユーザー向けのコンテンツを作成したり、自動的に画面を遷移させるなど便利な機能もたくさん盛り込まれています。HTMLの基本的な知識があれば誰でも活用できるので、Web開発にご興味ある方も含めてぜひ参考にしてみてください！
なお、paizaラーニングでは、動画で学べる「HTML/CSS入門編」の講座を公開していますので、まずHTMLの基本を学びたいという方にはこちらもおすすめです。
【 Authpack 】
■「Authpack」の使い方
それでは、「Authpack」の基本的な使い方について具体的に見ていきましょう！
まずはトップページにある【Create Account】ボタンをクリックして無料のユーザー登録を済ませておきます。
登録画面が表示されたら【Signup】ボタンをクリックします。
GoogleやGitHubアカウントで登録するか、メールアドレスとパスワードを入力して登録を済ませましょう。
すると、専用のダッシュボード画面が表示されます！
この画面ではアプリの設定、ユーザーの管理、APIキーの取得、カスタマイズ機能などが利用できるようになります。
■Webページにログイン機能を組み込もう！
それでは「Authpack」を利用して、ごく普通の静的なWebページにログインなどのユーザー認証を実現する機能を組み込んでみましょう！
まずはダッシュボード画面のメニューにある【API Keys】タブから、埋め込み用のスクリプトをコピーします。
このスクリプトを対象のHTML内にある「headタグ」の末尾に貼り付けましょう。
最後にボタンを1つ配置しておきます。
<button data-authpack="open">スタートボタン</button>
data属性として【data-authpack="open"】を付与しておきます。実はこれだけでユーザー認証を組み込むことができるようになるのです。
ブラウザで確認してみるとボタンが表示されているのでクリックしてみましょう！
するとユーザー認証用のフォーム画面が表示されます！
ログインボタンの他に、新規のユーザー登録ができる【Signup】ボタンも提供されています。これにより、一般的なWebサービスと同じく誰でもユーザー登録ができるようになるわけです。
詳細は後述しますが、ログインしたユーザーだけに表示されるページやコンテンツなども制御することが可能です。
また、新規・既存のユーザー情報は自分のダッシュボード画面からいつでも確認できるようになっています。
この画面から任意のユーザーを追加したり、セッション情報を閲覧するような機能もあるので便利です。
ちなみに、ユーザー側がログアウトしたい場合はブラウザに表示されているボタンをもう一度クリックして、画面隅にあるログアウトボタンをクリックしましょう。
このようにどんなWebページでも簡単にユーザー認証機能を組み込めるのが「Authpack」の大きな特徴と言えます。
■ログインユーザー向けのコンテンツを作ろう！
ユーザー認証ができるようになったので、今度はログインしたユーザーだけに表示されるWebページやコンテンツを作ってみましょう。
作り方としては2つあり、もっとも簡単な方法はログインしたときに特定のWebページへ自動的に遷移させる方法です。
これはダッシュボード画面の【Settings】メニューから設定できるようになっています。
【Login Redirect Url】の項目で、ログインユーザー向けに表示されるWebページのURLを入力して保存するだけです。これでログインもしくは新規登録したユーザーだけに、自動で指定したWebページが表示されます。
もう1つの方法としては、HTML要素のdata属性を利用してコンテンツを表示・非表示させる方法です。利用できる属性としては【data-authpack】【data-value】【data-trigger】の3つがあります。
次のサンプル例を見てください。
<h1 data-authpack="show" data-value="user" data-trigger="present">こんにちは！ </h1>
【data-authpack】の値を「show」にするとコンテンツを表示するという意味になります。そして、その条件としてログインユーザーを意味する【data-value="user"】と、現在ログイン中であることを意味する【data-trigger="present"】を指定するわけです。
これでログインしたユーザーだけに表示されるHTMLコンテンツのできあがりです。
さまざまなHTML要素にすぐ適用できるので、誰でも簡単に既存のWebページを編集できるわけです。
また、【data-trigger="missing】と記述すればログインしていないユーザーに表示されるコンテンツも作成できます。
<h1 data-authpack="show" data-value="user" data-trigger="missing">現在、ログインしていません </h1>
逆にログインしていないユーザーに表示させたくないコンテンツがある場合は、【data-authpack】の値を「hide」にするだけでOKです。
<h1 data-authpack="hide" data-value="user" data-trigger="missing">こんにちは </h1>
このようにdata属性の値を切り替えるだけで、簡単にWebページを動的に変化させることが可能になるので便利です。
また、ログイン時に自動遷移をする機能と組み合わせれば、より強力なコンテンツを手軽に構築していくことも可能でしょう。
■「Authpack」の便利な機能
「Authpack」には他にもユーザー認証を生かした便利な機能がいくつか提供されているのでご紹介しておきます。
たとえば、ログインしたユーザーの名前をdata属性を使って自動的に表示する機能があります。
これは【data-authpack】属性の値を「replace」にして、【data-value】の値に「user.name」を付与するだけです。
<h1 こんにちは、 <span data-authpack="replace" data-value="user.name"> </span> さん </h1>
上記の場合、たとえば「田中 太郎」というユーザーがログインしていると…
「こんにちは、田中 太郎さん」
のように表示されるわけです。
これらのdata属性は、以下のように複数組み合わせることも可能です。
<h1 data-authpack="show" data-value="user" data-trigger="present"> こんにちは、 <span data-authpack="replace" data-value="user.name"> </span> さん </h1>
上記の場合は、ログイン中のユーザー向けに名前を付与したメッセージを表示してくれます。
他にも、名字だけを表示したりメールアドレスや課金ユーザー向けの情報などにもアクセスできる機能が提供されています。（詳細はこちら）
また、「metaタグ」にもdata属性を付与することが可能で、たとえばログインしていないユーザーが訪問したときに自動で任意のWebページに遷移させることが可能です。
<meta data-authpack="guard" data-redirect="/home.html" />
【data-authpack】属性の値に「guard」を付与すると、ログインしていないユーザーは閲覧できなくなります。そして【data-redirect】に遷移先のアドレスを付与することで、自動的に画面が遷移するというわけです。
Webページ全体を表示・非表示させたい場合に便利な機能でしょう。
最後に「ホワイトリスト」の登録について説明しておきます。
これはダッシュボード画面から【settings】メニューに切り替えると設定できる項目で、自分のWebサイトを登録できるようになります。
入力ボックスに「https://」から始まるWebサイトのURLを入力して保存するだけです。
これにより、登録したWebサイト以外では「Authpack」の機能が利用できないようになります。たとえば、誰かが自分の「Authpack」のクライアントキーを利用して認証機能を作ろうとしても構築できないので安全性が高まるわけですね。
他にも、決済サービスのStripeを利用した課金機能や、Google・GitHub・Slackなどのアカウントを活用したソーシャルログイン機能も簡単に設定できる仕組みが提供されています。
このような便利機能を活用すれば、普通のWebページが多機能なWebサイトに早変わりするわけです。個人プロジェクトからプロトタイプの作成まで、幅広いニーズに対応できるようになるでしょう。
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は、静的なWebページに高機能なユーザー認証を簡単に組み込めるサービスについてご紹介しました！
「Authpack」は個人の利用だけでなく、複数人のチームで開発できる機能も盛り込まれています。また、今回はHTMLだけを利用した使い方をご紹介しましたが、他にもJavaScriptやReact・Vueなどを使った手法も提供されています。
さらに、Webhookを利用したイベント処理も組み込めるので、上級者であればさらに高度な使い方も楽しめる奥深さがあるわけです。
ぜひみなさんもユーザー認証を組み込んだオリジナルのサイトを構築してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
