Workaround for snippet urls not allowed with Redirect URI
I am using mac to develop MEAN stack project. My web pages are up https://localhost:3000/#/login
and https://localhost:3000/#/new
running (note that all my pages must have /#/
a middle in order to work). https://localhost:3000/#/new
has a button that leads to google login passportjs
. In mine routes ==> index.js
I have installed
var express = require('express');
var router = express.Router();
... ...
router.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
router.get('/auth/google/callback',
passport.authenticate('google', { successRedirect: '/login',
failureRedirect: '/login' }));
As Google APIs ==> Credentials
when I installed https://localhost:3000/auth/google/callback
both Authorized redirect URIs
. I get an error when I click the login button on my page
Error: redirect_uri_mismatch
The redirect URI in the request, https://localhost:3000/auth/facebook/callback, does not match the ones authorized for the OAuth client. Visit https://console.developers.google.com/apis/credentials/oauthclient/367100934152-7csfhcdnkapil4obku1pr2cnrsmthk61.apps.googleusercontent.com?project=367100934152 to update the authorized redirect URIs.
I assume this is because it is https://localhost:3000/auth/facebook/callback
not a valid URI for my application, but if I set https://localhost:3000/#/auth/facebook/callback
in the settings page, this is NOT allowed:Invalid Redirect: https://localhost:3000/#/auth/google/callback cannot contain a fragment.
So, does anyone know if I can change my application to work without #
that https://localhost:3000/login
, and https://localhost:3000/new
etc. worked? As a result, https://localhost:3000/auth/facebook/callback
there will also be a valid URI ...
Edit 1:
After @Sevran's answer and the doc on how to configure the server to work with html5mode , I did the following:
1) added $locationProvider.html5Mode(true)
toapp.config
2) added <base href="/" />
in index.ejs
(note that the project does not index.html
)
3) keeps .state('new', url: '/new', ...
inapp.config
4) NOTHING in httpd-vhosts.conf
that has <VirtualHost *:80>
and <VirtualHost *:433>
because I believe my server is controlled express.js
, not httpd-vhosts.conf
and the port is 3000
.
5) NOT added .htaccess
to the project like this answer
6) added in the app.js
following, I also tried changing index.html
to index.ejs
.
app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
The tests show
-
the input
https://localhost:3000/#/new
in the url bar becomeshttps://localhost:3000/new
and it loads the corresponding page. -
typing
https://localhost:3000/new
in the URL bar raises an errornot found 404
. -
typing
https://localhost:3000/auth/google
in the url bar invokesError: redirect_uri_mismatch
as above.
In conclusion, I think that rewriting (url-free #
) should be managed express, but the code I wrote didn't do the job. As for .htaccess
, I also tried putting it in DocumentRoot
from httpd-vhosts.conf
or in the project root folder, it didn't help.
source to share
You can remove the hash from your url using HTML5 mode:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Don't forget to set the base in the tag : <head>
<head>
<base href="/">
...
</head>
Please note that if you are using Angular 1.6 you also need to change hashPrefix
:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix(''); // remove the ! from URL
}]);
Read more about the changelog here .
source to share
Changes you need to make:
1) Angular Side: since you already changed
$locationProvider.html5Mode(true) in app.config
added <base href="/" /> in index.ejs
keeps .state('new', url: '/new', ... in app.config
2) hta access
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
3) This change is needed from the server,
If using apache:
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
The above my-app
would be the name of the app. and DocumentRoot
and Directory
should be the full path to the root of the application
For express:
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
app.listen(3006); //the port you want to use
source to share