この記事で行うこと

この記事の続編です→「vue-apolloに付属するデモチャットアプリ「ApolloChat」のGraphQLバックエンドをPostGraphileに置き換えてみた」
自前のユーザー認証をやめて、OpenID Connectを使ってシングルサインオンするように書き換えてみました。OpenIDプロバイダーとして、オンプレのGitLabを使用します。ユーザー認証をGitLabに任せることにより、PostgreSQLで利用者のパスワード等を管理しなくて良くなりました。
以後、自前認証のApolloChatを「自前版ApolloChat」、OpenIDを使って実装し直すApolloChatを「OpenID版ApolloChat」と呼びます。

ソースコード

https://github.com/kanedaq/vue-apollo から入手できます。OpenID版ApolloChatはブランチ名「openid_version」です。
本記事は、自前版ApolloChatとOpenID版ApolloChatのソースコードの差分について記述します。PostgreSQLのdatabaseは作り直します。
また、本記事では「 ~/work/ 」の下で作業を行います。

自前版ApolloChatのソースコード

cd ~/work
git clone https://github.com/kanedaq/vue-apollo
cd vue-apollo/tests/demo/

OpenID版ApolloChatのソースコード

上記コマンドに加えて、以下を実行します。
Webで見るならこちら：https://github.com/kanedaq/vue-apollo/tree/openid_version/tests/demo

git checkout openid_version

動かすには、以下を実行してWebサーバーを立ち上げ、ブラウザから「 http://localhost:8080/demo/ 」にアクセスします。
ただしOpenID版ApolloChatは、GitLabから取得したApplication IDやSecret等で設定ファイルやソースコードを書き換えてから動かす必要があります（後述）。

yarn install
yarn serve

ユーザー認証の流れ

新旧のユーザー認証を図にしました。
シーケンス図はVisual Studio Code上でPlantUMLを使用して作成し、そのファイルは「 ~/work/vue-apollo/tests/demo/doc/ 」に保存しました。

【旧】自前認証

【新】 OpenID ConnectでSSO

ユーザー認証後の流れ【新旧共通】

実装の手抜き（デモにありがちな）

参考ページ（感謝します）

多分わかりやすいOpenID Connect
OAuth 2 in Action
[Python] PyJWT で Google OAuth 2.0 API の ID Token を検証
 PostgreSQLで「あればUPDATE、なければINSERT」のUPSERTをやってみる
 JavaScriptでURLクエリを取得する
 Vue使いなら知っておきたいVueのパターン・小技集
 Visual Studio Code で UML を描こう！
PlantUML 概要：シーケンス図

GitLab導入・設定

それでは作業を開始します。
OpenIDプロバイダーとして、オンプレのGitLabを使用します。今回は手っ取り早くDockerでローカルに導入します。
適当なディレクトリに移動後、以下を実行します。

git clone https://github.com/sameersbn/docker-gitlab
cd docker-gitlab
docker-compose up -d

Macを使っている場合、以下のようなエラーが出ることがあります。対処として、docker-compose.ymlを編集し、「/srv/docker」をOSユーザーがアクセスできるディレクトリに変更するのが手っ取り早いでしょう。

ERROR: for docker-gitlab_redis_1  Cannot start service redis: b'Mounts denied: \r\nThe path /srv/docker/gitlab/redis\r\nis not shared from OS X and is not known to Docker.\r\nYou can configure shared paths from Docker -> Preferences... -> File Sharing.\r\nSee https://docs.docker.com/docker-for-mac/osxfs/#namespaces for morRecreating docker-gitlab_postgresql_1 ... error

コンテナ立ち上げ後に「docker-compose ps」を実行すると、以下のように表示されました。

           Name                         Command               State                           Ports                        
---------------------------------------------------------------------------------------------------------------------------
docker-gitlab_gitlab_1       /sbin/entrypoint.sh app:start    Up      0.0.0.0:10022->22/tcp, 443/tcp, 0.0.0.0:10080->80/tcp
docker-gitlab_postgresql_1   /sbin/entrypoint.sh              Up      5432/tcp                                             
docker-gitlab_redis_1        /sbin/entrypoint.sh --logl ...   Up      6379/tcp

GitLabコンテナのhttpポートが10080ですので、ブラウザで http://localhost:10080/ にアクセスします。下の画面が出たら、rootのパスワードを変更します。

下の画面に行き、開発ユーザーを作成します。

ログインできたら、下の画面のように右上のメニューからSettingsを選択します。

左のメニューからApplicationsを選択します。

下の画面が出たら以下を入力し、Save applicationボタンを押します。

Name：test01 （任意の名称）
Redirect URI：http://localhost:8080/demo/login （後ほどフロント開発で実装します）
チェック：openid、email

下の画面が出たら、Application IDとSecretを開発用にコピペして保存しておきます。本番環境でのSecretは取り扱い要注意で、少なくともフロントエンドのソースコードに記述すべきではありません。

Application ID：cfd5dbe5d3093f2eb497030463737dc8438ead0e3779563ead3aaefdfc0838da
Secret：fdeb3e8f90000c378855ac1e557072dfb661038cf1e201a1fc50384ac441dcad

端末で以下を実行して、OpenIDプロバイダーに関する情報を取得しておきます。

curl http://localhost:10080/.well-known/openid-configuration | jq

以下のように表示されました。これも開発用にコピペして保存しておきます。ただし本記事ではhttpを使用しますので、アクセスするURLのhttpsはhttpに置き換えます。

{
  "issuer": "http://localhost:10080",
  "authorization_endpoint": "https://localhost:10080/oauth/authorize",
  "token_endpoint": "https://localhost:10080/oauth/token",
  "userinfo_endpoint": "https://localhost:10080/oauth/userinfo",
  "jwks_uri": "https://localhost:10080/oauth/discovery/keys",
  "scopes_supported": [
    "api",
    "read_user",
    "read_repository",
    "write_repository",
    "sudo",
    "openid",
    "profile",
    "email"
  ],
  "response_types_supported": [
    "code",
    "token"
  ],
  "response_modes_supported": [
    "query",
    "fragment"
  ],
  "token_endpoint_auth_methods_supported": [
    "client_secret_basic",
    "client_secret_post"
  ],
  "subject_types_supported": [
    "public"
  ],
  "id_token_signing_alg_values_supported": [
    "RS256"
  ],
  "claim_types_supported": [
    "normal"
  ],
  "claims_supported": [
    "iss",
    "sub",
    "aud",
    "exp",
    "iat",
    "sub_legacy",
    "name",
    "nickname",
    "email",
    "email_verified",
    "website",
    "profile",
    "picture",
    "groups"
  ]
}

バックエンド実装

それでは、自前版ApolloChatをOpenID版ApolloChatに移植する作業を開始します。まずはバックエンドから。

環境構築＆バックエンド実装(その1)：PostgreSQL関連まで

まず、以前書いた記事「PostgreSQLを操作するAPIを提供する、PostgRESTとPostGraphileを両方試してみた」の「環境構築その1」と同様の作業が必要となります。本記事では割愛します。
それに加え、以下の手順も必要です。

「docker-compose up」でコンテナを立ち上げる前に、docker-compose.ymlに以下のように環境変数を加えます。

~/work/laradock/docker-compose.yml

### PostgreSQL ###########################################
      environment:
+         - GITLAB_ISSUER=http://localhost:10080
+         - GITLAB_TOKEN_ENDPOINT=http://172.20.0.1:10080/oauth/token
+         - GITLAB_USERINFO_ENDPOINT=http://172.20.0.1:10080/oauth/userinfo
+         - GITLAB_JWKS_URI=http://172.20.0.1:10080/oauth/discovery/keys
+         - GITLAB_REDIRECT_URI=http://localhost:8080/demo/login
+         - GITLAB_CLIENT_ID=cfd5dbe5d3093f2eb497030463737dc8438ead0e3779563ead3aaefdfc0838da
+         - GITLAB_CLIENT_SECRET=fdeb3e8f90000c378855ac1e557072dfb661038cf1e201a1fc50384ac441dcad

環境変数の中身は以下の通りです。

GITLAB_ISSUER ：先程curlで取得した"issuer"をそのまま設定
GITLAB_TOKEN_ENDPOINT ：先程curlで取得した"token_endpoint"を、postgresコンテナ内からアクセスできるURLに変換して設定
GITLAB_USERINFO_ENDPOINT ：先程curlで取得した"userinfo_endpoint"を、postgresコンテナ内からアクセスできるURLに変換して設定
GITLAB_JWKS_URI ：先程curlで取得した"jwks_uri"を、postgresコンテナ内からアクセスできるURLに変換して設定
GITLAB_REDIRECT_URI ： GitLabのGUIで設定した"Redirect URI"をそのまま設定
GITLAB_CLIENT_ID ： GitLabのGUIから取得した"Application ID"を設定
GITLAB_CLIENT_SECRET ： GitLabのGUIから取得した"Secret"を設定

設定後、コンテナを立ち上げます。

cd ~/work/laradock
docker-compose up -d postgres pgadmin workspace
docker-compose ps

以下のように表示されました。

           Name                          Command              State           Ports         
--------------------------------------------------------------------------------------------
laradock_docker-in-docker_1   dockerd-entrypoint.sh           Up      2375/tcp              
laradock_pgadmin_1            docker-entrypoint.sh pgadmin4   Up      0.0.0.0:5050->5050/tcp
laradock_postgres_1           docker-entrypoint.sh postgres   Up      0.0.0.0:5432->5432/tcp
laradock_workspace_1          /sbin/my_init                   Up      0.0.0.0:2222->22/tcp

本記事では、PostgreSQLのユーザー定義関数でPythonを使用しますので、Laradockのpostgresコンテナに入って、Python等をインストールします。

docker exec -it laradock_postgres_1 bash

OSの確認

cat /etc/issue

以下のように表示され、postgresコンテナのOSはAlpine Linuxであることがわかりました。

Welcome to Alpine Linux 3.10
Kernel \r on an \m (\l)

以下を実行して、python関連のパッケージをインストールします。

apk add --no-cache --repository http://nl.alpinelinux.org/alpine/edge/testing python3 postgresql-plpython3

以下のように表示されました。

fetch http://nl.alpinelinux.org/alpine/edge/testing/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.10/main/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.10/community/x86_64/APKINDEX.tar.gz
(1/8) Installing libbz2 (1.0.6-r7)
(2/8) Installing expat (2.2.7-r0)
(3/8) Installing libffi (3.2.1-r6)
(4/8) Installing gdbm (1.13-r1)
(5/8) Installing xz-libs (5.2.4-r0)
(6/8) Installing sqlite-libs (3.28.0-r0)
(7/8) Installing python3 (3.7.3-r0)
(8/8) Installing postgresql-plpython3 (11.5-r0)
Executing busybox-1.30.1-r2.trigger
OK: 109 MiB in 39 packages

以下を実行して、postgresql-plpython3関連がインストールされた場所を調べます。

find / -name '*plpy*'

以下のように表示されました。

/usr/lib/postgresql/pgxs/src/pl/plpython
/usr/lib/postgresql/plpython3.so
/usr/share/postgresql/extension/plpython3u--unpackaged--1.0.sql
/usr/share/postgresql/extension/plpython3u.control
/usr/share/postgresql/extension/plpython3u--1.0.sql

私が動かした時は、上記ファイルは「/usr/local」になければ動きませんでしたので、以下のようにコピーしてしまいます。本番環境ではシンボリックリンクの方が良いでしょう。
参考URL：https://github.com/timescale/timescaledb/issues/473

cp -r /usr/lib/postgresql/* /usr/local/lib/postgresql/
cp /usr/share/postgresql/extension/* /usr/local/share/postgresql/extension/

IDトークンを検証するのに必要なパッケージをインストールします。

apk add gcc python3-dev musl-dev libffi-dev openssl-dev

以下のように表示されました。

fetch http://dl-cdn.alpinelinux.org/alpine/v3.10/main/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.10/community/x86_64/APKINDEX.tar.gz
(1/15) Upgrading musl (1.1.22-r2 -> 1.1.22-r3)
(2/15) Installing binutils (2.32-r0)
(3/15) Installing gmp (6.1.2-r1)
(4/15) Installing isl (0.18-r0)
(5/15) Installing libgomp (8.3.0-r0)
(6/15) Installing libatomic (8.3.0-r0)
(7/15) Installing mpfr3 (3.1.5-r1)
(8/15) Installing mpc1 (1.1.0-r0)
(9/15) Installing gcc (8.3.0-r0)
(10/15) Installing linux-headers (4.19.36-r0)
(11/15) Installing pkgconf (1.6.1-r1)
(12/15) Installing libffi-dev (3.2.1-r6)
(13/15) Installing musl-dev (1.1.22-r3)
(14/15) Installing openssl-dev (1.1.1c-r0)
(15/15) Installing python3-dev (3.7.3-r0)
Executing busybox-1.30.1-r2.trigger
OK: 271 MiB in 53 packages

引き続き、以下を実行します。

pip3 install requests pyjwt cryptography oauthlib pycrypto pyxero

以下のように表示されました。

Collecting requests
  Downloading https://files.pythonhosted.org/packages/51/bd/23c926cd341ea6b7dd0b2a00aba99ae0f828be89d72b2190f27c11d4b7fb/requests-2.22.0-py2.py3-none-any.whl (57kB)
    100% |████████████████████████████████| 61kB 2.0MB/s 
Collecting pyjwt
  Downloading https://files.pythonhosted.org/packages/87/8b/6a9f14b5f781697e51259d81657e6048fd31a113229cf346880bb7545565/PyJWT-1.7.1-py2.py3-none-any.whl
Collecting cryptography
  Downloading https://files.pythonhosted.org/packages/c2/95/f43d02315f4ec074219c6e3124a87eba1d2d12196c2767fadfdc07a83884/cryptography-2.7.tar.gz (495kB)
    100% |████████████████████████████████| 501kB 681kB/s 
  Installing build dependencies ... done
  Getting requirements to build wheel ... done
    Preparing wheel metadata ... done
Collecting oauthlib
  Downloading https://files.pythonhosted.org/packages/05/57/ce2e7a8fa7c0afb54a0581b14a65b56e62b5759dbc98e80627142b8a3704/oauthlib-3.1.0-py2.py3-none-any.whl (147kB)
    100% |████████████████████████████████| 153kB 1.5MB/s 
Collecting pycrypto
  Downloading https://files.pythonhosted.org/packages/60/db/645aa9af249f059cc3a368b118de33889219e0362141e75d4eaf6f80f163/pycrypto-2.6.1.tar.gz (446kB)
    100% |████████████████████████████████| 450kB 1.1MB/s 
Collecting pyxero
  Downloading https://files.pythonhosted.org/packages/20/3a/fb5fd6e92cc04855d500ca5aa5a150e069b951a51c138a236e3997d50214/pyxero-0.9.1-py2.py3-none-any.whl
Collecting idna<2.9,>=2.5 (from requests)
  Downloading https://files.pythonhosted.org/packages/14/2c/cd551d81dbe15200be1cf41cd03869a46fe7226e7450af7a6545bfc474c9/idna-2.8-py2.py3-none-any.whl (58kB)
    100% |████████████████████████████████| 61kB 337kB/s 
Collecting urllib3!=1.25.0,!=1.25.1,<1.26,>=1.21.1 (from requests)
  Downloading https://files.pythonhosted.org/packages/e6/60/247f23a7121ae632d62811ba7f273d0e58972d75e58a94d329d51550a47d/urllib3-1.25.3-py2.py3-none-any.whl (150kB)
    100% |████████████████████████████████| 153kB 710kB/s 
Collecting certifi>=2017.4.17 (from requests)
  Downloading https://files.pythonhosted.org/packages/69/1b/b853c7a9d4f6a6d00749e94eb6f3a041e342a885b87340b79c1ef73e3a78/certifi-2019.6.16-py2.py3-none-any.whl (157kB)
    100% |████████████████████████████████| 163kB 586kB/s 
Collecting chardet<3.1.0,>=3.0.2 (from requests)
  Downloading https://files.pythonhosted.org/packages/bc/a9/01ffebfb562e4274b6487b4bb1ddec7ca55ec7510b22e4c51f14098443b8/chardet-3.0.4-py2.py3-none-any.whl (133kB)
    100% |████████████████████████████████| 143kB 625kB/s 
Collecting asn1crypto>=0.21.0 (from cryptography)
  Downloading https://files.pythonhosted.org/packages/ea/cd/35485615f45f30a510576f1a56d1e0a7ad7bd8ab5ed7cdc600ef7cd06222/asn1crypto-0.24.0-py2.py3-none-any.whl (101kB)
    100% |████████████████████████████████| 102kB 1.1MB/s 
Collecting six>=1.4.1 (from cryptography)
  Downloading https://files.pythonhosted.org/packages/73/fb/00a976f728d0d1fecfe898238ce23f502a721c0ac0ecfedb80e0d88c64e9/six-1.12.0-py2.py3-none-any.whl
Collecting cffi!=1.11.3,>=1.8 (from cryptography)
  Using cached https://files.pythonhosted.org/packages/93/1a/ab8c62b5838722f29f3daffcc8d4bd61844aa9b5f437341cc890ceee483b/cffi-1.12.3.tar.gz
Collecting requests-oauthlib>=0.3.0 (from pyxero)
  Downloading https://files.pythonhosted.org/packages/c2/e2/9fd03d55ffb70fe51f587f20bcf407a6927eb121de86928b34d162f0b1ac/requests_oauthlib-1.2.0-py2.py3-none-any.whl
Collecting python-dateutil>=2.1 (from pyxero)
  Downloading https://files.pythonhosted.org/packages/41/17/c62faccbfbd163c7f57f3844689e3a78bae1f403648a6afb1d0866d87fbb/python_dateutil-2.8.0-py2.py3-none-any.whl (226kB)
    100% |████████████████████████████████| 235kB 3.6MB/s 
Collecting pycparser (from cffi!=1.11.3,>=1.8->cryptography)
  Using cached https://files.pythonhosted.org/packages/68/9e/49196946aee219aead1290e00d1e7fdeab8567783e83e1b9ab5585e6206a/pycparser-2.19.tar.gz
Building wheels for collected packages: cryptography
  Building wheel for cryptography (PEP 517) ... done
  Stored in directory: /root/.cache/pip/wheels/d0/02/96/64b1439e5409591b6b0294d1da2f66a4ae4f0548d1bdb225b7
Successfully built cryptography
Installing collected packages: idna, urllib3, certifi, chardet, requests, pyjwt, asn1crypto, six, pycparser, cffi, cryptography, oauthlib, pycrypto, requests-oauthlib, python-dateutil, pyxero
  Running setup.py install for pycparser ... done
  Running setup.py install for cffi ... done
  Running setup.py install for pycrypto ... done
Successfully installed asn1crypto-0.24.0 certifi-2019.6.16 cffi-1.12.3 chardet-3.0.4 cryptography-2.7 idna-2.8 oauthlib-3.1.0 pycparser-2.19 pycrypto-2.6.1 pyjwt-1.7.1 python-dateutil-2.8.0 pyxero-0.9.1 requests-2.22.0 requests-oauthlib-1.2.0 six-1.12.0 urllib3-1.25.3
You are using pip version 19.0.3, however version 19.2.3 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.

以上でLaradockのpostgresコンテナ内での作業は完了です。コンテナから抜けておきます。

exit

環境構築＆バックエンド実装(その2)：DB作成

前回の記事にER図を載せましたが、本記事ではユーザーのパスワードは管理しないため、user_accountsテーブルは不要となります。ユーザー登録用のuser_register関数等も不要となります。また、user_login関数の実装が大きく変わります。

作業手順

psqlに入リます。defaultユーザのパスワード: secret

psql -U default -h localhost -p 5432 -d default

OpenID版ApolloChat用DBを作成し、接続できることを確認します。
DB名をdemodbとしましたが、名前は何でも良いです。

create database demodb;
\c demodb

「 \c demodb 」し忘れると、別のデータベース内にスキーマを作成することになりますのでご注意ください。

引き続き以下のSQLを実行して、スキーマとデータを作成します（内容は後ほどご説明します）。
このSQLは「 ~/work/vue-apollo/tests/demo/postgraphile-server/schema_and_data.sql 」に保存しておきます。
なお、JWTの期限を発行後60分にしてあります。変更したい場合は、「60 minutes」の部分を書き換えてください。
参考URL：https://github.com/graphile/postgraphile/blob/master/examples/forum/schema.sql

~/work/vue-apollo/tests/demo/postgraphile-server/schema_and_data.sql

begin;

create extension if not exists plpython3u;

create role apollo_demo_postgraphile login password 'xyz';

create role apollo_demo_anonymous;
grant apollo_demo_anonymous to apollo_demo_postgraphile;

create role apollo_demo_login_user;
grant apollo_demo_login_user to apollo_demo_postgraphile;

create schema apollo_demo;
create schema apollo_demo_private;

create table apollo_demo.users (
  id               integer primary key,
  nickname         text not null,
  email            text not null unique check (email ~* '^.+@.+\..+$')
);

comment on table apollo_demo.users is 'A user of the chat.';
comment on column apollo_demo.users.id is 'The primary unique identifier for the user.';
comment on column apollo_demo.users.nickname is 'The user’s nickname.';
comment on column apollo_demo.users.email is 'The email address of the user.';

create table apollo_demo.channels (
  id               text primary key,
  name             text not null
);

comment on table apollo_demo.channels is 'A channel of the chat.';
comment on column apollo_demo.channels.id is 'The primary key for the channel.';
comment on column apollo_demo.channels.name is 'The channel’s name.';

create table apollo_demo.messages (
  id               integer primary key generated by default as identity,
  channel_id       text not null references apollo_demo.channels(id),
  user_id          integer not null references apollo_demo.users(id),
  content          text not null,
  date_added       timestamp not null default current_timestamp,
  date_updated     timestamp
) ;

comment on table apollo_demo.messages is 'A message written by a user.';
comment on column apollo_demo.messages.id is 'The primary key for the message.';
comment on column apollo_demo.messages.channel_id is 'The id of the channel.';
comment on column apollo_demo.messages.user_id is 'The id of the user.';
comment on column apollo_demo.messages.content is 'The content this has been posted in.';
comment on column apollo_demo.messages.date_added is 'The time this message was added.';
comment on column apollo_demo.messages.date_updated is 'The time this message was updated';

alter default privileges revoke execute on functions from public;

create function apollo_demo_private.set_date_updated() returns trigger as $$
begin
  new.date_updated := current_timestamp;
  return new;
end;
$$ language plpgsql;

create trigger messages_date_updated before update
  on apollo_demo.messages
  for each row
  execute procedure apollo_demo_private.set_date_updated();

create type apollo_demo.jwt_token as (
  role text,
  user_id integer,
  exp integer
);

create type apollo_demo.usr_and_token as (
  usr apollo_demo.users,
  token apollo_demo.jwt_token
);

create or replace function apollo_demo.user_login(
  authorization_code text
) returns apollo_demo.usr_and_token as $$
  import os
  import requests
  import json
  import jwt

  GITLAB_ISSUER = os.environ["GITLAB_ISSUER"]
  GITLAB_TOKEN_ENDPOINT = os.environ["GITLAB_TOKEN_ENDPOINT"]
  GITLAB_USERINFO_ENDPOINT = os.environ["GITLAB_USERINFO_ENDPOINT"]
  GITLAB_JWKS_URI = os.environ["GITLAB_JWKS_URI"]
  GITLAB_REDIRECT_URI = os.environ["GITLAB_REDIRECT_URI"]
  GITLAB_CLIENT_ID = os.environ["GITLAB_CLIENT_ID"]
  GITLAB_CLIENT_SECRET = os.environ["GITLAB_CLIENT_SECRET"]

  def validate_id_token(id_token):
    # id_tokenからヘッダ取り出し
    header = jwt.get_unverified_header(id_token)

    # 公開鍵取得
    response = requests.get(GITLAB_JWKS_URI)
    jwk_set = response.json()
    jwk = next(filter(lambda k: k['kid'] == header['kid'], jwk_set['keys']))

    public_key = jwt.algorithms.RSAAlgorithm.from_jwk(json.dumps(jwk))

    # id_tokenからクレーム取り出し
    claims = jwt.decode(id_token,
                        public_key,
                        issuer=GITLAB_ISSUER,
                        audience=GITLAB_CLIENT_ID,
                        algorithms=["RS256"])
    return claims

  # token取得
  data = {
    "client_id": GITLAB_CLIENT_ID,
    "client_secret": GITLAB_CLIENT_SECRET,
    "code": authorization_code,
    "grant_type": "authorization_code",
    "redirect_uri": GITLAB_REDIRECT_URI
  }
  response = requests.post(GITLAB_TOKEN_ENDPOINT, data=data)

  id_token = response.json()["id_token"]
  access_token = response.json()["access_token"]

  # id_tokenの検証
  claims = validate_id_token(id_token)
  if claims["aud"] != GITLAB_CLIENT_ID:
    raise jwt.InvalidSignatureError('Signature verification failed')

  # UserInfoエンドポイントからユーザー名とメールアドレスを取得
  data = {
    "schema": "openid",
  }
  headers = {
    "Authorization": "Bearer " + access_token,
  }
  response = requests.post(GITLAB_USERINFO_ENDPOINT, data=data, headers=headers)

  id = response.json()["sub"]
  # name = response.json()["name"]
  nickname = response.json()["nickname"]
  email = response.json()["email"]

  # usersテーブルにUPSERT
  plpy.execute(f'''\
INSERT INTO apollo_demo.users (id, nickname, email) VALUES
  ({id}, '{nickname}', '{email}')
  ON CONFLICT (id)
  DO UPDATE SET nickname = '{nickname}', email = '{email}'
''')

  # 戻り値作成
  result = plpy.execute(f'''\
SELECT (({id}, '{nickname}', '{email}')::apollo_demo.users,
        ('apollo_demo_login_user', {id}, extract(epoch from (now() + interval '60 minutes')))::apollo_demo.jwt_token
       )::apollo_demo.usr_and_token as usr_and_token
''')
  return result[0]["usr_and_token"];
$$ language plpython3u strict security definer;

comment on function apollo_demo.user_login(text) is 'Creates a JWT token that will securely identify a user and give them certain permissions.';

create function apollo_demo.user_current() returns apollo_demo.users as $$
  select *
  from apollo_demo.users
  where id = current_setting('jwt.claims.user_id', true)::integer
$$ language sql stable;

comment on function apollo_demo.user_current() is 'Gets the user who was identified by our JWT.';

create function apollo_demo.user_logout(
) returns boolean as $$
begin
  return true;
end;
$$ language plpgsql stable;

create function apollo_demo.message_add(
  channel_id text,
  content text
) returns apollo_demo.messages as $$
declare
  message apollo_demo.messages;
begin
  INSERT INTO apollo_demo.messages (channel_id, user_id, content) VALUES
    (message_add.channel_id, current_setting('jwt.claims.user_id', true)::integer, message_add.content)
    RETURNING messages.* into message;
  return message;
end;
$$ language plpgsql strict security definer;

CREATE SEQUENCE mock_message_seq
    INCREMENT BY 1
    START WITH 1
;

create function apollo_demo.mock_message_send(
) returns boolean as $$
begin
  INSERT INTO apollo_demo.messages (channel_id, user_id, content)
    SELECT 'general', 0, 'How are you doing? ' || nextval('mock_message_seq');
  return true;
end;
$$ language plpgsql strict security definer;

grant usage on schema apollo_demo to apollo_demo_anonymous, apollo_demo_login_user;

grant select on table apollo_demo.users to apollo_demo_login_user;
grant update, delete on table apollo_demo.users to apollo_demo_login_user;

grant select on table apollo_demo.channels to apollo_demo_login_user;
grant insert, update, delete on table apollo_demo.channels to apollo_demo_login_user;

grant select on table apollo_demo.messages to apollo_demo_login_user;
grant insert, update, delete on table apollo_demo.messages to apollo_demo_login_user;

grant execute on function apollo_demo.user_login(text) to apollo_demo_anonymous;
grant execute on function apollo_demo.user_current() to apollo_demo_login_user;
grant execute on function apollo_demo.user_logout() to apollo_demo_anonymous, apollo_demo_login_user;
grant execute on function apollo_demo.message_add(text, text) to apollo_demo_login_user;
grant execute on function apollo_demo.mock_message_send() to apollo_demo_login_user;

alter table apollo_demo.users enable row level security;
alter table apollo_demo.messages enable row level security;

create policy select_users on apollo_demo.users for select
  using (true);

create policy select_messages on apollo_demo.messages for select
  using (true);

create policy update_users on apollo_demo.users for update to apollo_demo_login_user
  using (id = current_setting('jwt.claims.user_id', true)::integer);

create policy delete_users on apollo_demo.users for delete to apollo_demo_login_user
  using (id = current_setting('jwt.claims.user_id', true)::integer);

create policy insert_messages on apollo_demo.messages for insert to apollo_demo_login_user
  with check (user_id = current_setting('jwt.claims.user_id', true)::integer);

create policy update_messages on apollo_demo.messages for update to apollo_demo_login_user
  using (user_id = current_setting('jwt.claims.user_id', true)::integer);

create policy delete_messages on apollo_demo.messages for delete to apollo_demo_login_user
  using (user_id = current_setting('jwt.claims.user_id', true)::integer);


INSERT INTO apollo_demo.users (id, nickname, email) VALUES
  (0, 'The Bot', 'bot@bot.com');

INSERT INTO apollo_demo.channels (id, name) VALUES
  ('general', 'General discussion'),
  ('random', 'Have fun chatting!'),
  ('help', 'Ask for or give help');

INSERT INTO apollo_demo.messages (channel_id, user_id, content) VALUES
  ('general', 0, 'Welcome to the chat!');


create type apollo_demo.message_nullable as (
  id               integer,
  channel_id       text,
  user_id          integer,
  content          text,
  date_added       timestamp,
  date_updated     timestamp
) ;

create or replace function apollo_demo.graphql_subscription() returns trigger as $$
declare
  v_process_new bool = (TG_OP = 'INSERT' OR TG_OP = 'UPDATE');
  v_process_old bool = (TG_OP = 'UPDATE' OR TG_OP = 'DELETE');
  v_event text = TG_ARGV[0];
  v_topic_template text = TG_ARGV[1];
  v_attribute text = TG_ARGV[2];
  v_record record;
  v_sub text;
  v_topic text;
begin
  if v_process_new then
    v_record = new;
  else
    v_record = old;
  end if;

  if v_attribute is not null then
    execute 'select $1.' || quote_ident(v_attribute)
    using v_record
    into v_sub;
  end if;

  if v_sub is not null then
    v_topic = replace(v_topic_template, '$1', v_sub);
  else
    v_topic = v_topic_template;
  end if;

  perform pg_notify(v_topic, json_build_object(
      'event', v_event,
      'newrec', new.*,
      'oldrec', old.*,
      'type', TG_OP
    )::text);

  -- RAISE LOG     'v_topic = %', v_topic;
  -- RAISE LOG     'json_build_object = %', json_build_object('event', v_event, 'newrec', new.*, 'oldrec', old.*, 'type', TG_OP);

  return v_record;
end;
$$ language plpgsql volatile set search_path from current;

DROP TRIGGER IF EXISTS _500_gql_update_message ON apollo_demo.messages;
CREATE TRIGGER _500_gql_update_message
  AFTER INSERT OR UPDATE OR DELETE ON apollo_demo.messages
  FOR EACH ROW
  EXECUTE PROCEDURE apollo_demo.graphql_subscription(
    'messageChanged', -- the "event" string, useful for the client to know what happened
    'graphql:message:$1', -- the "topic" the event will be published to, as a template
    'channel_id' -- If specified, `$1` above will be replaced with NEW.channel_id or OLD.channel_id from the trigger.
  );

commit;

処理が成功したら、psqlから抜けておきます。

\q

user_login関数について

今流したSQL文に含まれているユーザー定義関数「user_login」は、自前版ApolloChatと大きく実装が変わりました。
以下に、シーケンス図及びソースコードを再喝します。user_login関数は、シーケンス図のPostGraphileの部分を実装しています。

自前版ApolloChatのuser_login関数

create function apollo_demo.user_login(
  email text,
  password text
) returns apollo_demo.usr_and_token as $$
  select ((users.*)::apollo_demo.users, ('apollo_demo_login_user', users.id, extract(epoch from (now() + interval '60 minutes')))::apollo_demo.jwt_token)::apollo_demo.usr_and_token
    from apollo_demo.users
      inner join apollo_demo_private.user_accounts
      on users.id = user_accounts.user_id
    where 
      users.email = user_login.email
      and user_accounts.password_hash = crypt(user_login.password, user_accounts.password_hash);
$$ language sql strict security definer;

OpenID版ApolloChatのuser_login関数（Python使用）

user_login関数を実装する上での参考URL：[Python] PyJWT で Google OAuth 2.0 API の ID Token を検証

create or replace function apollo_demo.user_login(
  authorization_code text
) returns apollo_demo.usr_and_token as $$
  import os
  import requests
  import json
  import jwt

  GITLAB_ISSUER = os.environ["GITLAB_ISSUER"]
  GITLAB_TOKEN_ENDPOINT = os.environ["GITLAB_TOKEN_ENDPOINT"]
  GITLAB_USERINFO_ENDPOINT = os.environ["GITLAB_USERINFO_ENDPOINT"]
  GITLAB_JWKS_URI = os.environ["GITLAB_JWKS_URI"]
  GITLAB_REDIRECT_URI = os.environ["GITLAB_REDIRECT_URI"]
  GITLAB_CLIENT_ID = os.environ["GITLAB_CLIENT_ID"]
  GITLAB_CLIENT_SECRET = os.environ["GITLAB_CLIENT_SECRET"]

  def validate_id_token(id_token):
    # id_tokenからヘッダ取り出し
    header = jwt.get_unverified_header(id_token)

    # 公開鍵取得
    response = requests.get(GITLAB_JWKS_URI)
    jwk_set = response.json()
    jwk = next(filter(lambda k: k['kid'] == header['kid'], jwk_set['keys']))

    public_key = jwt.algorithms.RSAAlgorithm.from_jwk(json.dumps(jwk))

    # id_tokenからクレーム取り出し
    claims = jwt.decode(id_token,
                        public_key,
                        issuer=GITLAB_ISSUER,
                        audience=GITLAB_CLIENT_ID,
                        algorithms=["RS256"])
    return claims

  # token取得
  data = {
    "client_id": GITLAB_CLIENT_ID,
    "client_secret": GITLAB_CLIENT_SECRET,
    "code": authorization_code,
    "grant_type": "authorization_code",
    "redirect_uri": GITLAB_REDIRECT_URI
  }
  response = requests.post(GITLAB_TOKEN_ENDPOINT, data=data)

  id_token = response.json()["id_token"]
  access_token = response.json()["access_token"]

  # id_tokenの検証
  claims = validate_id_token(id_token)
  if claims["aud"] != GITLAB_CLIENT_ID:
    raise jwt.InvalidSignatureError('Signature verification failed')

  # UserInfoエンドポイントからユーザー名とメールアドレスを取得
  data = {
    "schema": "openid",
  }
  headers = {
    "Authorization": "Bearer " + access_token,
  }
  response = requests.post(GITLAB_USERINFO_ENDPOINT, data=data, headers=headers)

  id = response.json()["sub"]
  # name = response.json()["name"]
  nickname = response.json()["nickname"]
  email = response.json()["email"]

  # usersテーブルにUPSERT
  plpy.execute(f'''\
INSERT INTO apollo_demo.users (id, nickname, email) VALUES
  ({id}, '{nickname}', '{email}')
  ON CONFLICT (id)
  DO UPDATE SET nickname = '{nickname}', email = '{email}'
''')

  # 戻り値作成
  result = plpy.execute(f'''\
SELECT (({id}, '{nickname}', '{email}')::apollo_demo.users,
        ('apollo_demo_login_user', {id}, extract(epoch from (now() + interval '60 minutes')))::apollo_demo.jwt_token
       )::apollo_demo.usr_and_token as usr_and_token
''')
  return result[0]["usr_and_token"];
$$ language plpython3u strict security definer;

できそう(^^)PostgreSQLのユーザー定義関数でPythonが使えて助かった。PL/pgSQLだったらどう実装して良いか（そもそも実装できるのか）わからなかった。
— 普通のプログラマ＠舌下免疫療法中 (@kanedaq) August 30, 2019

環境構築＆バックエンド実装(その3)：PostGraphile関連

前回の記事の「環境構築＆バックエンド実装(その3)」と全く同じです。本記事では割愛します。
環境構築後に、PostGraphileも立ち上げます。

docker-compose up -d postgres pgadmin workspace postgraphile_demo

$ docker-compose ps
            Name                          Command              State                Ports            
-----------------------------------------------------------------------------------------------------
laradock_docker-in-docker_1    dockerd-entrypoint.sh           Up       2375/tcp                     
laradock_pgadmin_1             docker-entrypoint.sh pgadmin4   Up       0.0.0.0:5050->5050/tcp       
laradock_postgraphile_demo_1   ./cli.js --plugins @graphi      Up       0.0.0.0:16000->16000/tcp,    
                               ...                                      5000/tcp                     
laradock_postgres_1            docker-entrypoint.sh postgres   Up       0.0.0.0:5432->5432/tcp       
laradock_workspace_1           sudo bash -c [ -e /var/run      Up       0.0.0.0:2222->22/tcp,        
                               ...                                      0.0.0.0:3389->3389/tcp,      
                                                                        0.0.0.0:14000->4000/tcp,     
                                                                        0.0.0.0:18080->8080/tcp

$ docker logs laradock_postgraphile_demo_1
PostGraphile v4.4.1 server listening on port 16000 🚀

  ‣ GraphQL API:         http://0.0.0.0:16000/graphql (subscriptions enabled)
  ‣ GraphiQL GUI/IDE:    http://0.0.0.0:16000/graphiql
  ‣ Postgres connection: postgres://apollo_demo_postgraphile:[SECRET]@postgres/demodb
  ‣ Postgres schema(s):  apollo_demo
  ‣ Documentation:       https://graphile.org/postgraphile/introduction/

* * *

フロントエンド変更

バックエンドの作業が完了しましたので、次はフロントエンドのVue.jsアプリに手を加えていきます。
以下、自前版ApolloChatとOpenID版ApolloChatのソースコード差分を示します。必要に応じて、シーケンス図も再喝します。

~/work/vue-apollo/tests/demo/src/common.js (新規)

汎用性の高いルーチンを格納するソースファイルを新規作成しました。
実装する上での参考URL：JavaScriptでURLクエリを取得する

~/work/vue-apollo/tests/demo/src/common.js

// https://qiita.com/akinov/items/26a7fc36d7c0045dd2db
export function getUrlQueries () {
  var queryStr = window.location.search.slice(1) // 文頭?を除外
  var queries = {}

  // クエリがない場合は空のオブジェクトを返す
  if (!queryStr) {
    return queries
  }

  // クエリ文字列を & で分割して処理
  queryStr.split('&').forEach(function (queryStr) {
    // = で分割してkey,valueをオブジェクトに格納
    var queryArr = queryStr.split('=')
    queries[queryArr[0]] = queryArr[1]
  })

  return queries
}

~/work/vue-apollo/tests/demo/src/vue-apollo.js (変更)

主な変更点としては、

Configに以下の値を追加
- gitlab_authorization_endpoint ： curlで取得した"authorization_endpoint"を、https→httpにして設定
- gitlab_response_type ：認可コードを意味する'code'を設定
- gitlab_client_id ： GitLabのGUIから取得した"Application ID"を設定
- gitlab_scope ： GitLabのGUIで設定したopenidとemailを空白区切りで設定
- gitlab_redirect_uri ： GitLabのGUIで設定した"Redirect URI"をそのまま設定
readGitlabState関数の追加：ローカルストレージに設定されているstateを返す関数
redirectGitlab関数の追加：Webフロントエンド起動直後に呼ばれることを想定した関数。古いJWTを削除後、OpenIDプロバイダーの認可エンドポイントにリダイレクトします（下図参照）。stateパラメーターは今回は固定値を使っていますが、本来は毎回ランダム文字列を生成すべきです。

~/work/vue-apollo/tests/demo/src/vue-apollo.js

import Vue from 'vue'
import VueApollo from '../../../'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
+ import { getUrlQueries } from './common'

// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'postgraphile-demo-token'
+ const AUTH_GITLAB_STATE = 'postgraphile-demo-gitlab-state'

// Config
const defaultOptions = {
  // You can use `https` for secure connection (recommended in production)
  httpEndpoint: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql',
  // You can use `wss` for secure connection (recommended in production)
  // Use `null` to disable subscriptions
  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',
  // LocalStorage token
  tokenName: AUTH_TOKEN,
  // Enable Automatic Query persisting with Apollo Engine
  persisting: false,
  // Use websockets for everything (no HTTP)
  // You need to pass a `wsEndpoint` for this to work
  websocketsOnly: false,
  // Is being rendered on the server?
  ssr: false,
  // Override default http link
  // link: myLink,
  // Override default cache
  // cache: myCache,
  cache: new InMemoryCache(),
  // Additional ApolloClient options
  // apollo: { ... }
  getAuth: tokenName => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem(tokenName)
    // return the headers to the context so httpLink can read them
    return token ? ('Bearer ' + token) : ''
  },
+ 
+   gitlab_authorization_endpoint: 'http://localhost:10080/oauth/authorize',
+   gitlab_response_type: 'code',
+   gitlab_client_id: 'cfd5dbe5d3093f2eb497030463737dc8438ead0e3779563ead3aaefdfc0838da',
+   gitlab_scope: 'openid email',
+   gitlab_redirect_uri: 'http://localhost:8080/demo/login',
}
+ 
+ export function readGitlabState () {
+   return localStorage.getItem(AUTH_GITLAB_STATE)
+ }
+ 
+ export function redirectGitlab () {
+   let queries = getUrlQueries()
+   if (!queries['code']) {
+     let state = 'abcde'
+     localStorage.setItem(AUTH_GITLAB_STATE, state)
+     localStorage.removeItem(AUTH_TOKEN)
+     window.location = `${defaultOptions.gitlab_authorization_endpoint}?response_type=${defaultOptions.gitlab_response_type}&state=${state}&client_id=${defaultOptions.gitlab_client_id}&scope=${defaultOptions.gitlab_scope}&redirect_uri=${defaultOptions.gitlab_redirect_uri}`
+   }
+ }

// Call this in the Vue app file
export function createProvider (options = {}, { router }) {
  // Create apollo client
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler (error) {
      if (isUnauthorizedError(error)) {
        // Redirect to login page
        if (router.currentRoute.name !== 'login') {
          router.replace({
            name: 'login',
            params: {
              wantedRoute: router.currentRoute.fullPath,
            },
          })
        }
      } else {
        console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
      }
    },
  })

  return apolloProvider
}

// Manually call this when user log in
export async function onLogin (apolloClient, token) {
  localStorage.setItem(AUTH_TOKEN, token)
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    if (!isUnauthorizedError(e)) {
      console.log('%cError on cache reset (login)', 'color: orange;', e.message)
    }
  }
}

// Manually call this when user log out
export async function onLogout (apolloClient) {
  localStorage.removeItem(AUTH_TOKEN)
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    if (!isUnauthorizedError(e)) {
      console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
    }
  }
}

function isUnauthorizedError (error) {
  if (error) {
    if (error.message.indexOf('Unauthorized') >= 0 || error.message.indexOf('permission denied') >= 0 || error.message.indexOf('status code 401') >= 0) {
      return true
    }
  }
  return false
}

~/work/vue-apollo/tests/demo/src/main.js (変更)

冒頭にOpenIDプロバイダーの認可エンドポイントにリダイレクトする処理を追加しました。

~/work/vue-apollo/tests/demo/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
- import { createProvider } from './vue-apollo'
+ import { redirectGitlab, createProvider } from './vue-apollo'

Vue.config.productionTip = false

+ redirectGitlab()
const apolloProvider = createProvider({}, { router })

new Vue({
  router,
  store,
  apolloProvider,
  ...App,
}).$mount('#app')

~/work/vue-apollo/tests/demo/src/components/UserLogin.vue (変更)

OpenIDプロバイダーの認可エンドポイントからリダイレクトされてきた直後の処理を実装します（下図参照）。
今回新規作成したcommon.jsのgetUrlQueries関数を使って、URLパラメーターからstateと認可コードを取り出し、PostGraphileのuserLoginミューテーションに認可コードを渡して呼び出します。
するとPostgreSQL側ではユーザー定義関数「user_login」が呼び出され、認証がOKであればレスポンスとしてPostGraphile用JWTが返ってきますので、それをローカルストレージに設定します。
実装する上での参考URL：Vue使いなら知っておきたいVueのパターン・小技集

~/work/vue-apollo/tests/demo/src/components/UserLogin.vue

<script>
import UserCurrent from '../mixins/UserCurrent'
import USER_CURRENT from '../graphql/userCurrent.gql'
- import { onLogin } from '../vue-apollo'
+ import { onLogin, readGitlabState } from '../vue-apollo'
+ import { getUrlQueries } from '../common'
+ import USER_LOGIN from '../graphql/userLogin.gql'

export default {
  name: 'UserLogin',

  mixins: [
    UserCurrent,
  ],

  data () {
    return {
      showRegister: false,
      email: '',
      password: '',
      nickname: '',
    }
  },

  watch: {
-     // If already logged in redirect to other page
-     userCurrent (value) {
-       if (value) {
-         this.redirect()
-       }
+     // https://qiita.com/HayatoKamono/items/5958d8648007adf6881b
+     isOpen: {
+       immediate: true,
+       async handler () {
+         let queries = getUrlQueries()
+         let state = readGitlabState()
+         if (queries['state'] && queries['state'] === state) {
+           await this.$apollo.mutate({
+             mutation: USER_LOGIN,
+             variables: {
+               input: {
+                 authorizationCode: queries['code'],
+               },
+             },
+           }).then(async (res) => {
+             const apolloClient = this.$apollo.provider.defaultClient
+             await onLogin(apolloClient, res.data.userLogin.usrAndToken.token)
+             apolloClient.writeQuery({
+               query: USER_CURRENT,
+               data: {
+                 userCurrent: res.data.userLogin.usrAndToken.usr,
+               },
+             })
+             this.redirect()
+           }).catch((error) => {
+             console.error(error)
+           })
+         }
+         // localStorage.removeItem(AUTH_GITLAB_STATE)
+       },
    },
  },

  methods: {
-     async onDone (result) {
-       if (this.showRegister) {
-         this.showRegister = false
-       } else {
-         if (!result.data.userLogin) return
-         const apolloClient = this.$apollo.provider.defaultClient
-         // Update token and reset cache
-         await onLogin(apolloClient, result.data.userLogin.usrAndToken.token)
-         // Update cache
-         apolloClient.writeQuery({
-           query: USER_CURRENT,
-           data: {
-             userCurrent: result.data.userLogin.usrAndToken.usr,
-           },
-         })
-       }
-     },
- 
    redirect () {
      this.$router.replace(this.$route.params.wantedRoute || { name: 'home' })
    },
  },
}
</script>

<template>
  <div class="user-login">
    <div class="logo">
      <i class="material-icons icon">chat</i>
    </div>
    <div class="app-name">
      Apollo<b>Chat</b>
    </div>
-     <ApolloMutation
-       :mutation="showRegister
-         ? require('../graphql/userRegister.gql')
-         : require('../graphql/userLogin.gql')"
-       :variables="showRegister
-         ? {
-           input: {
-             email,
-             password,
-             nickname,
-           },
-         }
-         : {
-           input: {
-             email,
-             password,
-           },
-         }"
-       class="wrapper"
-       @done="onDone"
-     >
-       <form
-         slot-scope="{ mutate, loading, gqlError: error }"
-         :key="showRegister"
-         class="form"
-         @submit.prevent="mutate()"
-       >
-         <input
-           v-model="email"
-           class="form-input"
-           type="email"
-           name="email"
-           placeholder="Email"
-           required
-         >
-         <input
-           v-model="password"
-           class="form-input"
-           type="password"
-           name="password"
-           placeholder="Password"
-           required
-         >
-         <input
-           v-if="showRegister"
-           v-model="nickname"
-           class="form-input"
-           name="nickname"
-           placeholder="Nickname"
-           required
-         >
-         <div v-if="error" class="error">{{ error.message }}</div>
-         <template v-if="!showRegister">
-           <button
-             type="submit"
-             :disabled="loading"
-             class="button"
-             data-id="login"
-           >Login</button>
-           <div class="actions">
-             <a
-               data-id="create-account"
-               @click="showRegister = true"
-             >Create an account</a>
-           </div>
-         </template>
-         <template v-else>
-           <button
-             type="submit"
-             :disabled="loading"
-             class="button"
-             data-id="submit-new-account"
-           >Create new account</button>
-           <div class="actions">
-             <a @click="showRegister = false">Go back</a>
-           </div>
-         </template>
-       </form>
-     </ApolloMutation>
  </div>
</template>

<style lang="stylus" scoped>
@import '~@/style/imports'

.user-login
  height 100%
  display flex
  flex-direction column
  align-items center
  justify-content center

.logo
  .icon
    font-size 80px
    color $color

.app-name
  font-size 42px
  font-weight lighter
  margin-bottom 32px

.wrapper
  flex auto 0 0

.form
  width 100vw
  max-width 300px

.form-input,
.button
  display block
  width 100%
  box-sizing border-box

.form-input
  margin-bottom 12px

.actions
  margin-top 12px
  text-align center
  font-size 12px
</style>

以上でソースコードの変更は完了です。

OpenID版ApolloChatの実行

それでは動かしてみます。
以下を実行して、Webサーバー（Vue.jsアプリ配信）を立ち上げます。

cd ~/work/vue-apollo/tests/demo
yarn serve

正常にコンパイルされることを確認します。
コンパイル後、以下のように表示されました。

 DONE  Compiled successfully in 3918ms                                  11:55:16

 
  App running at:
  - Local:   http://localhost:8080/demo/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run yarn build.

表示に従い、ブラウザで「 http://localhost:8080/demo/ 」にアクセスして、OpenID版ApolloChatのフロントエンドを起動します。
画面がチラついた後、GitLabの認可画面が出てきました。
本当は認証画面も確認したかったのですが、うっかりGitLabにログインした状態で起動したので、認証画面を飛ばして認可画面が出てきてしまいました。
認証画面は、後ほどGitLabの別ユーザー（一般ユーザー）を作成して確認することにします。