小学生でもわかる AI図鑑
速報
  1. ホーム
  2. 小学生でもわかるClerk
  3. 第3話

Clerk 第3話

【小学生でもわかる】ログインした人にだけ見せるページの作り方！「隠す」と「守る」の違いまで

第2話で、index.html に Clerk（クラーク）のログイン画面が出るようになりました。ログインすると、ログイン画面の代わりに丸いボタンが出ます。けれど、ページのほかの所は、ログインの前とまったく同じ。本のメモをログインした人にだけ見せるには、いまどちらの状態かを調べて、出すものを切り替える数行が要ります。

  • 無料（Clerk の無料の Hobby プランの練習用アプリ。ログインの期間を変えることと、複数のアカウントの切り替えは、本番では有料のプラン）
Xで記事を読む シェア
ログインした人だけのカバー

どんな話？

Clerk のログインの前と後で、本棚メモのページの中身を切り替えた回です。Clerk.isSignedIn で2つの部屋の片方だけを見せ、名前が空ならメールで代えて textContent で入れ、Clerk.addListener で入った・出たのたびに描き直しました。ところが、ログアウトしてページのソースを開くと、隠したメモがそのまま残っていた。本当に守るのは、データを送る前に確かめるサーバーの仕事です。

この記事でわかること

  • 書きかえるのは index.html だけで、管理画面の設定は1つも変えない。ページに「入る前」と「入ったあと」の部屋を作り、Clerk.isSignedIn で片方だけを見せる
  • 名前は Clerk.user.firstName。制作では空だったので、メール（primaryEmailAddress.emailAddress）で代え、textContent で入れた
  • Clerk.addListener(render) で、入った・出たのたびに描き直す。ログアウトは Clerk.signOut()。ダブルクリックで開いたページは、読み直す（F5）とログインが切れた
  • ローカルのサーバーで開いたページでは、何も指定しないと、ログインやログアウトのあとはサイトの一番上（/）へ移った。ダブルクリックで開いたページは同じページのままだった
  • ログアウトして Ctrl と U でページのソースを開くと、display:none の箱の中にメモがそのまま入っている。画面で隠した文は、ページのソースに残る
  • ログインは、初めは7日で入り直し。無料の本番では7日のままで、長さを変えるのは有料のプラン。セッショントークンは約1分で使えなくなる

やることチェックリスト

0/6

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

  • HTML ファイルにログイン画面を付けたのに、ログインしてもページの中身が前と同じままの人
  • 自分の読書メモを、ログインした人にだけ見せたい人
  • 画面から消しただけの文がどこに残るのかを確かめ、「隠す」と「守る」の違いを知りたい人

この話のTIPS

  • 注意`display:none` は、文を消すのではなく、表示しないだけです。
  • コツ本当に守るとは、ログインしていない人にはデータを送らないこと。送ってから隠すのではなく、送る前に止める。その判断をするのが、ブラウザの外にあるサーバーです。
すべてのTIPS