Google one tap Login With Django ( The given origin is not allowed for the given client ID issue ) - django

I'm trying to connect Google One Tap Login with Django framework, but I'm having issue.
I'm not sure why this is displaying an issue. I followed all of the guidelines described in the Google documentation.
issue -
The given origin is not allowed for the given client ID
Here is my Google API client configuration for the javascript origin url.
Here is the login html template code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hi Reddit</h1>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload" data-client_id="i don't want to shere"
data-context="signin" data-ux_mode="popup" data-login_uri="http://localhost:8000/google/login/"
data-auto_select="true" data-itp_support="true">
</div>
<div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="outline" data-text="continue_with"
data-size="large" data-logo_alignment="left">
</div>
</body>
</html>
I'm not sure why this is displaying an issue.
Is it possible to load Google One Tap Javascript in Django?
What should I do to load Google One Tap Javascript in Django?

Related

Django not load sencha index.html

I am trying to run an ExtJS 7 app using and django 3 as backend.
The same index.html created by sencha cmd loads and runs as expected.
But loading it with django backend it does not load and gives an error (described below).
I guesss it is related to csrf token.
index.html:
{% load static %}
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>front</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader"
data-app="eef86001-0c1f-47f8-bad2-962464cb0916"
type="text/javascript" src="{%static "bootstrap.js" %}" >
</script>
</head>
<body>
</body>
</html
Error in chrome:
bootstrap.js:868 GET http://127.0.0.1:8000/index/bootstrap.json?_dc=1576345210630 404 (Not Found)
VM52:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at new Manifest (bootstrap.js:1949)
at Object.setManifest (bootstrap.js:2161)
at bootstrap.js:2141
at XMLHttpRequest.readyStateChange (bootstrap.js:854)
Thank you all for any help
Koby Peleg Hen
​

Ember Inspector doesn't detect ember-cli app

I'm running an ember-cli app. The Inspector (Chrome) says This webpage is not running Ember.js.
Looking at the source view on the browser, it includes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
How can I get the Inspector to recognize it?
I stumbled onto a solution. I happened to right-click on the page's source-view, and "Inspect" came up, so I chose it. Inspector now recognizes the page as ember.js.

How to login in auth0 via Postman

I'm playing with auth0 and currently trying to figure out how to log in with Postman
So far I took the following steps:
Created an App and set an allowed callback url to https://google.com
Created a GET request in Postman that looks something like this:
https://myauth0.url/authorize?response_type=token&client_id=my_clientId&redirect_uri=https://www.google.com
When I send the request I get the following response
<!DOCTYPE html>
<html>
<head>
<title>Sign In with Auth0</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="noindex, nofollow">
<link rel="shortcut icon" href="https://cdn.auth0.com/styleguide/components/2.0.2/media/logos/img/favicon.png">
</head>
<body>
...
So, It's a default auth0 login window, but how can I procceed and enter username & password to get token?
After some research I've figured out that it's impossible due to the passive authentication:
https://auth0.com/docs/api/authentication?http#database-ad-ldap-active-
The main difference between passive and active authentication is that
the former happens in the browser through the Auth0 Login Page and the
latter can be invoked from anywhere (a script, server to server, and
so forth).

Ember-CLI: Ember Build keeps building the wrong index.html

Ideally, I want my index.html from this:
<!-- app/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Program With Erik Blog Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/example1.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/example1.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
into production code. But for some strange reason, each time I call ember build, I do not get the expected production-looking code. Instead I get something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
.
.
.
<!-- lots of code -->
It's the default firebase page!
What is happening? I've deleted the picture multiple times. But each time I call ember build it builds the firebase default page rather than my ember app index.html.
I'm new to ember and I've been fiddling around heavily with the config/environment.js and the firebase.js. Any thoughts on why this might be happening?
On initialising a firebase app, one is prompted:
? What do you want to use as your public directory? (public)
make sure to set the dist folder as the public directory, that is
? What do you want to use as your public directory? (public) dist
using the default public will cause the above behavior no matter how many times you build your Ember app.
To fix the problem, re-initialise the firebase app with the firebase init command, and set the right folder as the public directory.

How to use a script block with HTMLBars

I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.