
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
というライブラリでカスタマイズしたものを設定することも可能みたいです(参考)。