０.目次
１.目的
２.実装したもの
３.使用したもの
４.開発手順
５.改善可能な点
６.チュートリアルからの変更点
７.まとめ
８.宣伝
１.目的
Wixのとあるページおいて特定のGoogleアカウントを持っている状態でないと入ることのできないWebページを作ること。
２.実装したもの
Wixの特定のページに入ろうとする際に、Googel OAuthの認証を済ませなければアクセスできないように制限する機能。具体的には下の動画の通り。
上のように、Googleアカウントでログインしなければ特定のページに入れないようになっている。もちろん、URLを直接打ち込んでも入れないし、指定されたアカウントでないとアクセスが拒否されるようになっている。
３.使用したもの
・macOS Big Sur(11.2.3)
・Wixエディター
・Velo（Wix内で有効なオープン開発プラットフォーム）
・Google Cloud Platform OAuth2.0
４.開発手順
私の参考にしたWebサイトとして、Velo で OAuth SSO を使用する というものがある。これには、WixでのOAuth認証開発のための全てが書かれている。しかし、所々間違っているところがあったり、そもそもコードが非常に読みづらい。そのため、私が最初から手順を書いていこうと思う。
①Google OAuth2.0の設定
認証情報が設定できたら、クライアント ID 、クライアントシークレットをメモしよう。承認済みリダイレクトURLには、”https://自分のページの名前/_functions/getAuth”を設定する。 自分のページの名前の部分だけ自分のページに合わせて変更してほしい。他は変えないで。
②シークレットマネージャーの設定
シークレットマネージャーとは、Wixの機能である。機密情報などをコード上で書かなくても良いように他の文字列に置き換えるというものだ。ここでいう機密情報というのは、上でメモしたクライアントシークレットのことである。Wixのホームの左サイドバーの「ディベロッパーツール」から「Secrets Manager」を選択しよう。開けたらシークレットの保存から、「名前」を”Google_API_Client_Secret”とし、「値」のところに上でメモしたクライアントシークレットを設定しよう。
③Veloの設定
１.Wixエディターで上のバーからDev Modeを選択し、開発モードを有効にするをクリック
２.Wixエディターの左にサイドバーが出現する。そのサイドバーの中の「コードファイル（{ }）」をクリック
３.「パッケージ」の中の「新規パッケージをインストール（＋）」をクリック
４.googleapisを検索してインストールする。
④コードファイルを追加
左サイドバーの「コードファイル（{ }）」の中で、「Backend Files」に"OAuth.jsw"と"http-functions.js"を追加しよう。この2つは名前を変更しない方が良い。
⑤ログインするためのページを作成
１.空のページを作成する
２.ログインするためのボタンを設置。見た目、URL、ページ名はなんでも良い。ボタンはWixに搭載されているものを。私の場合は以下のように設置した。
上の「unibaアカウントでログイン」というボタンを押すと認証ページに飛ぶようになっている。
３.左サイドバーの「Page Codes」から先ほど作ったボタンが設置されているページをクリック。
４.ページ下側にページ名がついたコードエディタが出るので、そこに以下のコードを書く。
import wixLocation from 'wix-location'; import {session} from 'wix-storage'; import {getAuthUrl} from 'backend/OAuth.jsw'; $w.onReady(function(){ $w('#button1').onClick((event) => {googleSignin()}); }) export function googleSignin() { getAuthUrl().then((result) => { const authorizationUrl=result.authUrl; const state=result.state; session.setItem("requestState", state); wixLocation.to(authorizationUrl); }); }
上の４行目の"#button1"の部分は、各人のページに追加したボタンの名称に合わせて変更する。名称はボタンにカーソルを合わせると見ることができる。
⑥OAuth.jswを編集
④で作成したOAuth.jswにコードを追加しよう。コードファイルは④で開いた「コードファイル（{ }）」の「Backend Files」からOAuth.jswを選択すれば編集できる。コードは以下の通り。
import { google } from 'googleapis'; import { getSecret } from 'wix-secrets-backend'; import crypto from 'crypto'; export async function getAuthUrl() { const googleClientSecret = await getSecret("Google_API_Client_Secret"); const googleConfig = {clientId:"メモしたクライアントID", clientSecret: googleClientSecret, redirect:"https://自分のWebサイトに合わせて/_functions/getAuth"}; const authConnection = new google.auth.OAuth2(googleConfig.clientId, googleConfig.googleClientSecret, googleConfig.redirect); const scope = ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile",]; const state = crypto.randomBytes(16).toString("hex") const authUrl = authConnection.generateAuthUrl({access_type: "offline", prompt: "consent", scope: scope, state:state }); return{state,authUrl}; }
上のコードの、"メモしたクライアントID"には①でメモしたクライアントIDを、”自分のWebサイトに合わせて”には、自分のWebサイトのURLを設定しよう。
⑦http-functions.jsを編集
上と同様にしてhttp-functions.jsにコードを書いていこう。コードは以下の通り。
import { response } from 'wix-http-functions'; import { google } from 'googleapis'; import wixUsersBackend from 'wix-users-backend'; import { getSecret } from 'wix-secrets-backend'; import { fetch } from 'wix-fetch'; //google calls this function with a get, after the user signs export async function get_getAuth(request) { // retrieve the client secret from the Secrets Manager const googleClientSecret = await getSecret('Google_API_Client_Secret'); const googleConfig = {clientId:"メモしたクライアントID", clientSecret: googleClientSecret, redirect:"https://”自分のWebサイトに合わせて”/_functions/getAuth"}; //get the autorization code and state variable form the request URL const code = await request.query.code; const state= await request.query.state; // create a connection to google's authentication services const auth2 = new google.auth.OAuth2( googleConfig.clientId, googleConfig.clientSecret, googleConfig.redirect ); //get the access token from the request with the authorization code we got from google const data = await auth2.getToken(code); const tokens = data.tokens; //get the user info using the access token const userInfoRes = await fetch(`https://www.googleapis.com/oauth2/v2/userinfo?alt=json&access_token=${tokens.access_token}`, { "method": "get" }) if (!userInfoRes.ok) { console.log("cound not get user info using access token") } //extract the user's email and profile picture URL const userInfo = (await userInfoRes.json()); const useremail = userInfo.email; const profilePicture = userInfo.picture; //now that we have the email we can use it to generate a Wix session token to use in the front end const sessiontoken = await wixUsersBackend.generateSessionToken(useremail); //return the url, session token, state variable, and profile picture to google to rediect the browser to our logged in page. return response({ status: 302, headers: { 'Location': `https://”自分のWebサイトに合わせて”/loggedin?sessiontoken=${sessiontoken}&responseState=${state}&profilepic=${profilePicture}&useremail=${useremail}`}}); }
上のコードの、"メモしたクライアントID"には①でメモしたクライアントIDを、”自分のWebサイトに合わせて”には、自分のWebサイトのURLを設定しよう。
⑧ログイン後のWebページをコーディングする
１.ログインしたのちに到着するページを作成する
２.ページを自由に作成できたら、そのページの内容全体を覆うような画像を被せる（ログインしていない時には画像の裏側が見えないように）
３.ページ名は自由だが、URLの末尾は"loggedin"にする（Wixでは２層目までしかURLを設定できないはず）
４.ページは他のところから見えないように、非表示設定にしておく
５.もう一つ新規ページを作る。これは、URLが直接入力された際にそれをアクセス拒否するためのページである。ページ名はなんでも良いが、URLの末尾は"error"とする。
６.下のコードのようにページをコーディングする
import wixLocation from 'wix-location'; import wixUsers from 'wix-users'; import {session} from 'wix-storage'; $w.onReady(function () { // get the session token and the profile pic URL const query = wixLocation.query; const sessionToken = query.sessiontoken; const userPic = query.profilepic; const responseState = query.responseState;
const userEmail = query.useremail; // remove the query parameters from the URL so they can't be copied. wixLocation.queryParams.remove(['sessiontoken', 'profilepic','responseState','useremail']); // retrieve the state variable data we saved before signing in const requestState=session.getItem("requestState") // if the requestState matches the responseState, log the user in using the session token if (sessionToken && (requestState === responseState)) { wixUsers.applySessionToken(sessionToken).then(() => { //set the profile picture on our landing page $w('#image107').src=userPic; }) $w("#image108").hide(); } else{ wixLocation.to("/error") } })
上のコードの最後の方の"#image108"にはページ全体を覆うために設定した画像の名前を設定する。"#image107"にはログインしているユーザーの画像を表示することができる。その機能を使いたい場合には、画像をログイン後のページに追加し、その画像の名称を"#image107"と置き換えよう。特定のGoogleアカウントにアクセスを制限したい時には、"userEmail"という変数にログインされたGoogleアカウントのeメールアドレスが入っているので、最後に登場しているif文に条件を追加しよう。
これで無事にお使いのWixページにおいてGoogle OAuth認証が使えるようになっただろう。
５.改善可能な点
今回URLの貼り付けによるログインに対しては、webサイトを巨大な画像で隠しながら別サイトに強引に移行させるという手法をとった。それはWixにおいてJSを用いたリダイレクト処理ができないからである。Wix以外のWebサイトの場合は、.htaccessなどを用いてリダイレクト処理を書き不正なログインの場合はページを瞬時に切り替えるなどするのだろう。しかし、Wixではそれらが制限されていて使えない。そのために、リダイレクトではなくページ移行による不正アクセス防止をおこなった。しかし、これでは一瞬ページに入ってしまうため、一瞬でもアクセスが可能になってしまう。そのため巨大な画像を用いてページを隠してその一瞬を無効にしたわけである。しかしこれではページが重く感じてしまう。これを改善できれば、よりスマートなページに仕上げることができるのだが、残念ながら今のところその方法は思い付いていない。
６.チュートリアルから変更した点
今回は、VeloでOAuth SSOを使用する というチュートリアルを参考にしたわけであるが、変更点がいくつかあった。それを紹介して終了にしたいと思う。
①ログイン後ページのURL
ログイン後のページのURLの末尾を"signed-in"にせよと書いてあったがそれは間違っている。実際には、"loggedin"にしなくてはいけない。"signed-in"ではそのようなページは存在しないというエラーが出てしまう。
②全体的なURL
チュートリアルでは一連のURLの中に"sso-example"を含めよというように書かれている。しかし、実際には含める必要がない。むしろ、含めてしまうとWixはURLが２層に設定できなくなっている（まだ見つけていないだけかもしれない）ため、"loggedin"を書くことができなくなり詰んでしまう。もし２層設定できたとしても、"sso-example"といった文言は必要ない。
③URLを直接入力された場合の処理
チュートリアルにはURLが直接入力された場合の処理が書かれていなかったように思える。そのため、普通に直接入力すればログインできてしまっていた。今回は、５の項目で紹介したようなやり方で解決したが、改善できるところが多そうだ。
④特定のGoogleアカウントのみでのアクセス許可
チュートリアルでは、Googleアカウントさえ持っていればアクセスできてしまうようになっていた。これではあまり意味がない。特定のGoogleアカウントのみに許可するために、ログイン後ページのコードの最後のif文に条件を加えた。
７.まとめ
今回はWixにおいてのGoogle OAuth認証の設定方法について述べた。Wixはjavascriptの機能の制限が多かったり、特殊なコードを書く必要があったりとかなりの苦労を強いられたが、上のように完成することができた。それでもWixは直感的にWebサイトが作れるため非常に便利である。ぜひWebサイトを作る機会があれば、Wixを用いてみてほしい。
８.宣伝
このように、執筆者であるARATAは技術的な側面のOtasukeにおいては力を発揮でき人間であると自負しております。言語はPythonが中心ですが、今回はjavascriptに挑戦して上のようになりました。どの言語に興味があるないという点はあまりこだわりがありませんので、是非どんなことでもソフトウェアの技術系でありましたら、手が足りなくなった時は依頼をお願いします❤︎
ちなみに上の動画のエラーページで登場するDont WorryのD君も私が３Dソフトで作りましたし、動画編集なんかもいけちゃいますので、そちらの方面でもよければ★