We have followed the Google Identity migration documentation and replaced the new code but used existing google OAuth client ID.
Previously, before migration we used to get a warning in console, please see the image attached-
Now, after we have added the new code the warning message is not showing in the console. Below is the new console image
But still we have received one reminder mail from Google with our app name and OAuth key that we still need to migrate.
So we are confused if the migration was successful or not? Please help? Do we have to create a new OAuth client ID and replace?
(Please note we are not seeing any warning in console related to this.)
Here is our code snippet-
<div class="bg-google text-white pt-3 pb-2 px-4 rounded-lg cursor-pointer ml-4 mr-4" #click="SocialLogin">
<img src="#/assets/images/pages/login/google.svg"/><span>Sign in with Google</span>
</div>
mounted() {
this.tokenClient= google.accounts.oauth2.initTokenClient({
client_id: process.env.VUE_APP_GOOGLE_OAUTH_KEY,
scope: "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile",
prompt: "consent",
callback: tokenResponse => this.handleCredentialResponse(tokenResponse) // your function to handle the response after login. 'access_token' will be returned as property on the response
});
},
methods: {
SocialLogin() {
this.tokenClient.requestAccessToken();
},
async handleCredentialResponse(response) {
this.$helper.showLoading();
const userInfo = await new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', `https://www.googleapis.com/oauth2/v3/userinfo`);
xhr.setRequestHeader('Authorization', `Bearer ${response.access_token}`)
xhr.onload = function () {
if (this.status >= 200 && this.status < 300)
resolve(JSON.parse(this.responseText));
else resolve({ err: '404' });
};
xhr.send();
});
if(userInfo){
localStorage.setItem("user_email", userInfo.email);
}
},
}
I checked with the team apparently there is a back log for these messages so they may have detected a few weeks ago that you were still using the old library and the message is just getting sent now.
You know you have upgraded and are no longer getting the error message so your all good.
Related
I am facing a problem in findding a login data of user and user is logedin to my site using google auth platform and i want to get that login data and store data in my local storage and I am working on Angular 14
Kindly help if any one know the soluiton of this problem
Thanks
I had searched a lot but not find a convieniet solution
It's work for me in this way.
According to the new documentation of Google (https://developers.google.com/identity/gsi/web/guides/overview), you should follow next steps:
Create a google app in google cloud console platform and generate a client id.
Load the client library. Add this script "<script src="https://accounts.google.com/gsi/client" async defer>" between the <head></head> tags of your index.html file of Angular project.
Add this code on ngOnInit() function in the component that you would like to have "Sign in with Google button."
ngOnInit() {
// #ts-ignore
google.accounts.id.initialize({
client_id: "YOUR GOOGLE CLIENT ID",
callback: this.handleCredentialResponse.bind(this),
auto_select: false,
cancel_on_tap_outside: true,
});
// #ts-ignore
google.accounts.id.renderButton(
// #ts-ignore
document.getElementById("google-button"),
{ theme: "outline", size: "large", width: "100%" }
);
// #ts-ignore
google.accounts.id.prompt((notification: PromptMomentNotification) => {});
}
async handleCredentialResponse(response: any) {
// Here will be your response from Google.
console.log(response);
}
Add div or button element to the html file of this component, with the same id that you mentioned into the initialization. ( "google-button" ):
<div class="" id="google-button"></div>.
Let me know if you have any issues.
navbar.template.html
<div id="g_id_onload"
data-client_id="832#################m921.apps.googleusercontent.com"
data-cancel_on_tap_outside="false"
data-login_uri="http://localhost:3010/auth/g-one-tap"
data-callback="handleCredentialResponse">
</div>
The API get the response I am able to validate the user and return the validated JWT token, how can I capture the response and avoid the redirection of the page to http://localhost:3010/auth/g-one-tap
How can I us some click function to be used in typsecript file which can help in following the normal login flow which I am using earlier with google login button.
public socialSignIn(responseData) {
this.googleSubscription = this._globalService.googleLogin(responseData)
.subscribe(
data => {
if (data['success']) {
const token = data['data']['token'];
if (this.platformId === 'browser') {
// login to save the token
}
}
},
error => {
console.log('error');
}
);
}
As mentioned here, you should not use both data-login_uri and data-callbck attributes at the same time.
You need to remove the data-login_uri attribute in you code.
And povide an implementation for the callback function (whose name is handleCredentialResponse in your code) if not yet.
I'm working on a Podio integration as a Slack bot.
I'm starting to use it just for use for my company to test it, then I could share it with everybody.
I've used the podio-js platform with Node JS, and started locally with a "web app" by starting from this example: https://github.com/podio/podio-js/tree/master/examples/password_auth
I need to do a post request, so I maintained all the code of the example in order to log in with user and password. The original code worked, then I changed the code to make a post request, in particular I change the lines of index.js into this:
router.get('/user', function(req, res) {
podio.isAuthenticated().then(function () {
var requestData = { "title": "sample_value" };
return podio.request('POST', '/item/app/15490175', requestData);
})
.then(function(responseData) {
res.render('user', { data: responseData });
})
.catch(function () {
res.send(401);
});
});
But in the end is giving a "Unauthorized" response.
It seems like the password auth doesn't let to make POST request to add new items! Is that possible?
I've already read all the documentation but I'm not able to explain why and how I can solve this.
Regards
I have a API login service using a http service to perform a login logic (LoginApiService, login-api.service.ts):
login(data: LoginCredentials): Observable<LoginResult> {
let body = JSON.stringify( data );
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(`${this.getBaseUrl()}/login`, body, options)
.map(this.extractData)
.catch(function(error: Response){
return Observable.throw(error); // IF YOU TRY TO LOGIN WITH WRONG CREDENTIALS, AN ERROR WILL BE THROWN
});
}
This service is used in a global service class (authService, auth.service.ts):
login(data: LoginCredentials): void {
this.api.login(data).subscribe(
data => {
this.isLoggedIn = true;
this.group = data.group;
this.Login.emit(new LoginResult(this.group)); // THE CALL OF THIS FUNCTION IS IGNORED IF THE "this.Login.error" FUNCTION HAS BEEN CALLED BEFORE
},
error => {
this.Login.error(error); // THIS IS IGNORED TOO, IF IT WAS CALLED BEFORE
}
);
}
Component (LoginComponent, login.component.ts):
ngOnInit() {
this.LoginSubscription = this.authService
.Login
.subscribe( // THE EVENTS ARE NOT FIRED IF THE ERROR EVENT HAS BEEN FIRED BEFORE ONCE
data => {
if ( this.authService.isLoggedIn ) {
this.router.navigate(['/dashboard']);
}
},
error => {
this.handleError(error);
}
);
}
login() {
this.authService.login( new LoginCredentials(this.user, this.password) );
}
Template (login.component.html):
<div>
<label>User: </label>
<input [(ngModel)]="user" placeholder="user">
</div>
<div>
<label>Password: </label>
<input [(ngModel)]="password" placeholder="password" type="password">
</div>
<p>
<button (click)="login()">Login</button>
</p>
If the error event function of the login observable has been called before, calling the emit and/or error function after this will be ignored.
With correct login credentials, the simulated API responses with HTTP
code 200 and everything works fine
On wrong credentials, the HTTP response is 500
After calling the API again (with correct or wrong credentials), the
events are not fired anymore
This means: If you use wrong login credentials you won't be able to try again without re-loading the page.
Is my idea of using observables wrong?
Why is the event stream hung up after calling the error function
once?
Could someone give me a hint to solve this problem (some kind of
workaround eg.)?
This is happening because you are erroring out your EventEmitter. EventEmitters are basically Observables and when it's Observer calls error or complete, it closes the Obersvable. Closed Observables will stop emitting events by design.
To fix your problem, remove this.Login.error(error); in the LoginComponent. so that you are not closing that EventEmitter. Try replacing that with logic to tell the user that the credentials are wrong or some other message to describe the error.
I am using Facebooker2 to create a Facebook IFrame application, which is running as a tab inside a Facebook page.
My goal is to be able to use the social plugins, such as a like button and comments, etc. I tried to define them as follows
<div class="fb-like" data-href="http://www.myurl.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
and trying to initialize the FB JS SDK by calling
<%= fb_connect_async_js %>
which outputs
<div id="fb-root"><script async="" src="http://connect.facebook.net/en_US/all.js"></script></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true,
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
This has worked before, and stopped working after Facebook pushed their last platform update about a month ago. Now the Like button is not being rendered at all. I also tried the XFBML approach, no luck.
note: I am able to publish feeds using FB.publish, and I am also able to create a like button using the IFrame method.
I looked at the documentation and didn't see anywhere where it was mentioned that Social plugins cannot be used inside IFrame apps.
any ideas anyone?
I've encountered the same issue, and the only workaround i could find is to set a timer to execute FB.XFBML.parse();
If anyone has a better solution, I'd be thanksfull to hear it !
window.fbAsyncInit = function() {
setTimeout(function(){
FB.XFBML.parse();
FB.Event.subscribe('auth.login', function(response) {
fbLogin();
});
FB.Event.subscribe('auth.logout', function(response) {
fbLogout();
});
/* Additional initialization code here */
},
1000);
var params = {
appId : facebookAppId,
channelUrl : siteurl+'facebookChannelFile.php',
status : true,
cookie : true,
oauth : true,
xfbml : true
};
FB.init(params);
};