Netlify CMSのGit Gatewayで複数人ログインを可能にする

Netlify CMSの管理画面にログインする方法として、一番簡単な方法はGithubのOauthでログインすることだと思います。

しかし、複数人でコンテンツ管理したい場合には向いていないので git gatewayによってメールアドレスとパスワードでログインできるよう にします。

Netlify CMSの管理画面に複数人ログインできるようにする

Netlify CMSの設定（config.yml）編集

編集ファイルconfig.yml

backend:
  name: git-gateway
  accept_roles:
    - admin

accept_roles は設定しなくても大丈夫です。Netlify側でユーザーの権限を設定することができて、その権限のみログインを許可するという設定です。

NetlifyでIdentityとGit Gatewayを有効化

Netlifyで該当のサイトのIdentityを有効化します。

Git Gatewayも有効化します

Settings > Identity > Services Git Gateway > Enable Git Gateway

サイトにNetlify Identity widgetを埋め込む

サイトにNetlifyのログインウィジェット、Netlify Identity widgetを埋め込みます。

使い方 として、ログイン・ログアウトボタンを表示するようなhtmlが置かれているんですが、招待メールからの登録さえできればいいので、ここではscriptタグだけ埋め込みます。

方法としては、Netlifyの Settings > Build & deploy > Post processing > Snippet injectionより、 </head> タグの前に下記を埋め込むように設定します。

<script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

以上で設定は完了となります。

Netlify Identityでユーザーを招待する

するとこんな感じの招待メールが届きます。

You have been invited

You have been invited to create a user on https://pensuke.work. Follow this link to accept the invite:

Accept the invite

Accept the inviteのリンクから飛ぶとSign up画面になるのでパスワードを登録します。

これで無事登録完了です。あとは/adminにアクセスするとsign inできるようになります。

ログイン画面はこんな感じです。

Sign upはNetlifyの設定で invite only にしてあげると、ここからはできなくなります。管理画面の用途ではinvite onlyにしておいた方が無難でしょう。

以上となります。今回はログインや招待に既に用意されているNetlify Identity Widgetを使いましたが、 gotrue-js というライブラリでカスタマイズしたものを設定することも可能みたいです（参考）。