googleoauth<\/code> option in the config.default.js<\/code> file to true<\/code>, and by supplying the OAuth config object as outlined in the guides below. Additionally, you can allow only emails from the certain domain to use the service with one config setting.<\/p>\nThe basic idea was taken from the Google Cloud Platform Node.js guide<\/a>.<\/p>\nThis has been submitted as a pull request<\/a> on the official Raneto Github repository. This is my way of saying thanks to an awesome author of Raneto. edit: 13.09.2016: The pull request was approved and merged!<\/a>.<\/em><\/p>\nSteps on how to reproduce this on fresh copy<\/h2>\n
Below are the steps one needs to take to get this working on a fresh copy of Raneto. In case this won’t make it to the official repo, you can clone my fork here<\/a>. Just make sure you set your Google OAuth credentials properly (more about this in the X<\/strong> section).<\/p>\nInstall packages via npm<\/h3>\n
Make sure you first install Raneto dependencies<\/a> after you clone it.<\/em><\/p>\nInstall the following packages:<\/p>\n
\nnpm install passport --save-dev<\/code><\/li>\nnpm install passport-google-oauth20 --save-dev<\/code><\/li>\n<\/ul>\nEditing the app\/index.js<\/code> file<\/h3>\n\n- Add passport:
var passport=require('passport');<\/code> just after raneto is required.<\/li>\n- Add oauth2 middleware:
var oauth2= require('.\/middleware\/oauth2.js');<\/code> in the config block, just afer error_handler.js<\/code> middleware.<\/li>\n- Change
secret<\/code> to secret:config.secret,<\/code> in the \/\/ HTTP Authentication<\/code> section.<\/li>\n- >>> Remove the rn-login route
app.post('\/rn-login', route_login);<\/code><\/li>\n- >>> Remove the logout route:
app.get('\/logout', route_logout);<\/code><\/li>\n- Add the following Oauth settings, just before the
app.post('\/rn-login', route_login);<\/code> line:<\/li>\n<\/ul>\n\/\/ OAuth2\nif (config.googleoauth === true) {\napp.use(passport.initialize());\napp.use(passport.session());\napp.use(oauth2.router(config));\napp.use(oauth2.template);\n}\n<\/code><\/pre>\n\n- Change the
Online Editor Routes<\/code> to look like this now:<\/li>\n<\/ul>\n\/\/ Online Editor Routes\nif (config.allow_editing === true) {\nif (config.googleoauth === true) {\napp.post('\/rn-edit', oauth2.required, route_page_edit);\napp.post('\/rn-delete', oauth2.required, route_page_delete);\napp.post('\/rn-add-page', oauth2.required, route_page_create);\napp.post('\/rn-add-category', oauth2.required, route_category_create);\n}\nelse {\napp.post('\/rn-edit', authenticate, route_page_edit);\napp.post('\/rn-delete', authenticate, route_page_delete);\napp.post('\/rn-add-page', authenticate, route_page_create);\napp.post('\/rn-add-category', authenticate, route_category_create);\n}\n}\n<\/code><\/pre>\n\n- Set the root routes to be like this:<\/li>\n<\/ul>\n
\/\/ Router for \/ and \/index with or without search parameter\nif (config.googleoauth === true) {\napp.get('\/:var(index)?', oauth2.required, route_search, route_home);\napp.get(\/^([^.]*)\/, oauth2.required, route_wildcard);\n}\nelse {\napp.get('\/:var(index)?', route_search, route_home);\napp.get(\/^([^.]*)\/, route_wildcard);\n}\n<\/code><\/pre>\nEditing the app\/middleware\/authenticate.js<\/code> file<\/h3>\nChange the res.redirect(403, '\/login');<\/code> line to be:<\/p>\nif (config.googleoauth === true) {\nres.redirect('\/login');\n}\nelse {\nres.redirect(403, '\/login');\n}\n<\/code><\/pre>\nEditing the app\/routes\/login_page.route.js<\/code> file<\/h3>\nAdd the googleoauth<\/code> variable to the return object like this:<\/p>\nreturn res.render('login', {\nlayout : null,\nlang : config.lang,\nrtl_layout : config.rtl_layout,\ngoogleoauth : config.googleoauth\n});\n<\/code><\/pre>\nAdd the oauth2.js file<\/h3>\n
Create a new file oauth2.js<\/code> in the app\/middleware<\/code> folder with the following content:<\/p>\n\/\/ Copyright 2015-2016, Google, Inc.\n\/\/ Licensed under the Apache License, Version 2.0 (the \"License\");\n\/\/ you may not use this file except in compliance with the License.\n\/\/ You may obtain a copy of the License at\n\/\/\n\/\/ http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\/\/\n\/\/ Unless required by applicable law or agreed to in writing, software\n\/\/ distributed under the License is distributed on an \"AS IS\" BASIS,\n\/\/ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n\/\/ See the License for the specific language governing permissions and\n\/\/ limitations under the License.\n\n'use strict';\n\nvar express = require('express');\nvar debug = require('debug')('raneto');\n\n\/\/ [START setup]\nvar passport = require('passport');\nvar GoogleStrategy = require('passport-google-oauth20').Strategy;\n\nfunction extractProfile (profile) {\nvar imageUrl = '';\nif (profile.photos && profile.photos.length) {\nimageUrl = profile.photos[0].value;\n}\nreturn {\nid: profile.id,\ndisplayName: profile.displayName,\nimage: imageUrl\n};\n}\n\n\/\/ [START middleware]\n\/\/ Middleware that requires the user to be logged in. If the user is not logged\n\/\/ in, it will redirect the user to authorize the application and then return\n\/\/ them to the original URL they requested.\nfunction authRequired (req, res, next) {\nif (!req.user) {\nreq.session.oauth2return = req.originalUrl;\nreturn res.redirect('\/login');\n}\nnext();\n}\n\n\/\/ Middleware that exposes the user's profile as well as login\/logout URLs to\n\/\/ any templates. These are available as `profile`, `login`, and `logout`.\nfunction addTemplateVariables (req, res, next) {\nres.locals.profile = req.user;\nres.locals.login = '\/auth\/login?return=' +\nencodeURIComponent(req.originalUrl);\nres.locals.logout = '\/auth\/logout?return=' +\nencodeURIComponent(req.originalUrl);\nnext();\n}\n\/\/ [END middleware]\n\nfunction router(config) {\n\/\/ Configure the Google strategy for use by Passport.js.\n\/\/\n\/\/ OAuth 2-based strategies require a `verify` function which receives the\n\/\/ credential (`accessToken`) for accessing the Google API on the user's behalf,\n\/\/ along with the user's profile. The function must invoke `cb` with a user\n\/\/ object, which will be set at `req.user` in route handlers after\n\/\/ authentication.\npassport.use(new GoogleStrategy({\nclientID: config.oauth2.client_id,\nclientSecret: config.oauth2.client_secret,\ncallbackURL: config.oauth2.callback,\nhostedDomain: config.hostedDomain || '',\naccessType: 'offline',\n\n}, function (accessToken, refreshToken, profile, cb) {\n\/\/ Extract the minimal profile information we need from the profile object\n\/\/ provided by Google\ncb(null, extractProfile(profile));\n}));\n\npassport.serializeUser(function (user, cb) {\ncb(null, user);\n});\npassport.deserializeUser(function (obj, cb) {\ncb(null, obj);\n});\n\/\/ [END setup]\n\nvar router = express.Router();\n\n\/\/ Begins the authorization flow. The user will be redirected to Google where\n\/\/ they can authorize the application to have access to their basic profile\n\/\/ information. Upon approval the user is redirected to `\/auth\/google\/callback`.\n\/\/ If the `return` query parameter is specified when sending a user to this URL\n\/\/ then they will be redirected to that URL when the flow is finished.\n\/\/ [START authorize]\nrouter.get(\n\/\/ Login url\n'\/auth\/login',\n\n\/\/ Save the url of the user's current page so the app can redirect back to\n\/\/ it after authorization\nfunction (req, res, next) {\nif (req.query.return) {\nreq.session.oauth2return = req.query.return;\n}\nnext();\n},\n\n\/\/ Start OAuth 2 flow using Passport.js\npassport.authenticate('google', { scope: ['email', 'profile'] })\n);\n\/\/ [END authorize]\n\n\/\/ [START callback]\nrouter.get(\n\/\/ OAuth 2 callback url. Use this url to configure your OAuth client in the\n\/\/ Google Developers console\n'\/auth\/google\/callback',\n\n\/\/ Finish OAuth 2 flow using Passport.js\npassport.authenticate('google'),\n\n\/\/ Redirect back to the original page, if any\nfunction (req, res) {\nreq.session.loggedIn = true;\nvar redirect = req.session.oauth2return || '\/';\ndelete req.session.oauth2return;\nres.redirect(redirect);\n}\n);\n\/\/ [END callback]\n\n\/\/ Deletes the user's credentials and profile from the session.\n\/\/ This does not revoke any active tokens.\nrouter.get('\/auth\/logout', function (req, res) {\nreq.session.loggedIn = false;\nreq.logout();\nres.redirect('\/login');\n});\nreturn router;\n}\n\nmodule.exports = {\nextractProfile: extractProfile,\nrouter: router,\nrequired: authRequired,\ntemplate: addTemplateVariables\n};\n<\/code><\/pre>\nThis is a changed file based on the Google Node.js official example<\/a> file. Notable differences are in Google strategy settings which basically load settings from our settings config:<\/p>\nclientID: config.oauth2.client_id,\nclientSecret: config.oauth2.client_secret,\ncallbackURL: config.oauth2.callback,\nhostedDomain: config.hostedDomain || '',\n<\/code><\/pre>\nWe’ll define these settings the config.default.js<\/code> file now.<\/p>\nEditing the example\/config.default.js<\/code> file<\/h3>\nChange\/add the following settings:<\/p>\n
allow_editing : true,\nauthentication : true,\ngoogleoauth: true,\noauth2 : {\nclient_id: 'GOOGLE_CLIENT_ID',\nclient_secret: 'GOOGLE_CLIENT_SECRET',\ncallback: 'http:\/\/localhost:3000\/auth\/google\/callback',\nhostedDomain: 'google.com'\n},\nsecret: 'someCoolSecretRightHere',\n<\/code><\/pre>\nGoogle OAuth2 Credentials<\/h3>\n
Oauth2 settings (GOOGLE_CLIENT_ID<\/code> and GOOGLE_CLIENT_SECRET<\/code>) can be found in your Google Cloud Console->API Manager->Credentials<\/code> project settings (create a project if you don’t have one yet):<\/p>\n![\"\"](\"http:\/\/i.imgur.com\/TdkYKul.png\")
<\/p>\n
The callback<\/code>, if testing locally, can be set as shown above (http:\/\/localhost:3000\/auth\/google\/callback<\/code>). The hostedDomain<\/code> option allows certain domains – for your use case you may want to set this to your domain.<\/p>\nGoogle+ API<\/h4>\n
If you get an error like:<\/p>\n
\n Access Not Configured. Google+ API has not been used in project 701766813496 before, or it is disabled. Enable it by visiting https:\/\/console.developers.google.com\/apis\/api\/plus\/overview?project=701766813496 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.\n<\/p><\/blockquote>\n
Make sure you enable Google+ API for your project:<\/p>\n
![\"\"](\"http:\/\/i.imgur.com\/GcymtaZ.png\")
<\/p>\n
Adding Zocial CSS<\/h3>\n
To add support for the nice Zocial social buttons<\/a>, download this file<\/a> from their Github repo to the themes\/default\/public\/styles\/<\/code> folder.<\/p>\nEditing the themes\/default\/templates\/layout.html<\/code> file<\/h3>\nReplace the login form with:<\/p>\n