I tried to integrate reCAPTCHA v3 to my Login form and applied all the necessary configuration combinations and examples. Here is my implementation based on Documentation page. However, I cannot pass the g-recaptcha-response value to my Java backend. I think the problem is related to combining grecaptcha and submit methods below.
index.html:
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
login.vue:
<a-button class="primary g-recaptcha" <!-- added "g-recaptcha" to the class -->
#click="onSubmit">
Login
</a-button>
onSubmit() {
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'})
.then(function(token) {
// I move my login block to here ---------------------------------
this.$refs.formContainer.validate((valid) => { // --> throws error
if (valid) {
const params = { email: 'test#test.com', password: '******' };
this.login(params).then((response) => {
// pass "token" value to the backend
});
}
return false;
});
// ---------------------------------------------------------------
});
});
}
},
Although I get the token value properly, the this.$refs.formContainer.validate((valid) line throws "Uncaught (in promise) TypeError: Cannot read property '$refs' of undefined" error. So, how should I combine these methods (grecaptcha.execute and my login block) properly?
Related
I'd like to use Google One Tap in my Angular 11 app. Following the documentation I added <script async defer src="https://accounts.google.com/gsi/client"></script> to my html and then used the following code in my app.component.html:
<div id="g_id_onload"
data-client_id="MY_GOOGLE_CLIENT_ID"
data-callback="handleCredentialResponse",
data-cancel_on_tap_outside="false">
</div>
The popup works fine, though I can't seem to log in. If I create a function handleCredentialResponse in app.component.ts, I get the following error: [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.
If I instead try to use the JavaScript API, Typescript throws the following error: Property 'accounts' does not exist on type 'typeof google'
What should I do to be able to using Google One Tap in Angular?
I had a similar problem when I used the HTML API approach, so I ended up using the JavaScript API instead.
Here's what I did:
First, make sure to install the #types/google-one-tap package.
As you mentioned, I'm also importing the script in my index.html file, like so:
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<app-root></app-root>
</body>
Now, moving on to your main component which in my case is app.component.ts, import the following first:
import { CredentialResponse, PromptMomentNotification } from 'google-one-tap';
Then, you can add this on the ngOnInit(). Make sure to read the documentation to get more details on the onGoogleLibraryLoad event:
// #ts-ignore
window.onGoogleLibraryLoad = () => {
console.log('Google\'s One-tap sign in script loaded!');
// #ts-ignore
google.accounts.id.initialize({
// Ref: https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration
client_id: 'XXXXXXXX',
callback: this.handleCredentialResponse.bind(this), // Whatever function you want to trigger...
auto_select: true,
cancel_on_tap_outside: false
});
// OPTIONAL: In my case I want to redirect the user to an specific path.
// #ts-ignore
google.accounts.id.prompt((notification: PromptMomentNotification) => {
console.log('Google prompt event triggered...');
if (notification.getDismissedReason() === 'credential_returned') {
this.ngZone.run(() => {
this.router.navigate(['myapp/somewhere'], { replaceUrl: true });
console.log('Welcome back!');
});
}
});
};
Then, the handleCredentialResponse function is where you handle the actual response with the user's credential. In my case, I wanted to decode it first. Check this out to get more details on how the credential looks once it has been decoded: https://developers.google.com/identity/gsi/web/reference/js-reference#credential
handleCredentialResponse(response: CredentialResponse) {
// Decoding JWT token...
let decodedToken: any | null = null;
try {
decodedToken = JSON.parse(atob(response?.credential.split('.')[1]));
} catch (e) {
console.error('Error while trying to decode token', e);
}
console.log('decodedToken', decodedToken);
}
I too had the same problem in adding the function to the angular component.
Then i found a solution by adding JS function in appComponent like this:
(window as any).handleCredentialResponse = (response) => {
/* your code here for handling response.credential */
}
Hope this help!
set the div in template to be rendered in ngOnInit
`<div id="loginBtn" > </div>`
dynamically inject script tag in your login.ts as follows
constructor(private _renderer2: Renderer2, #Inject(DOCUMENT) private _document: Document){}
ngAfterViewInit() {
const script1 = this._renderer2.createElement('script');
script1.src = `https://accounts.google.com/gsi/client`;
script1.async = `true`;
script1.defer = `true`;
this._renderer2.appendChild(this._document.body, script1);
}
ngOnInit(): void {
// #ts-ignore
window.onGoogleLibraryLoad = () => {
// #ts-ignore
google.accounts.id.initialize({
client_id: '335422918527-fd2d9vpim8fpvbcgbv19aiv98hjmo7c5.apps.googleusercontent.com',
callback: this.googleResponse.bind(this),
auto_select: false,
cancel_on_tap_outside: true,
})
// #ts-ignore
google.accounts!.id.renderButton( document!.getElementById('loginBtn')!, { theme: 'outline', size: 'large', width: 200 } )
// #ts-ignore
google.accounts.id.prompt();
}
}
async googleResponse(response: google.CredentialResponse) {
// your logic goes here
}
Google One Tap js library tries to find callback in the global scope and can't find it, because your callback function is scoped somewhere inside of your app, so you can attach your callback to window, like window.callback = function(data) {...}.
Also, since you are attaching it to window, it's better to give the function a less generic name.
I am trying to use Vue.js for my front end to call Stripe and create a token which then is sent to my backend. I have tested everything using plain HTML/JS and it all works fine, my issue comes in trying to use Vue.js I think my issue might be in how I am binding the stripe public key. Below is my code, and I have zero output to speak of, I get just redriected to the same page but wth ? at the end of the URL. Nothing else, console shows nothing and no error message or anything send to my back end.
template code
There is more but not related
<div class="col-md-8">
<card class='stripe-card col-md-8'
:class='{ complete }'
:stripe='stripeKey'
:options='stripeOptions'
#change='complete = $event.complete'
/>
<button class='pay-with-stripe' #click='pay' :disabled='!complete'>Submit Payment Details</button>
<br>
</div>
script section with relavent added
import { Card, createToken } from 'vue-stripe-elements-plus'
import axios from 'axios';
export default {
components: { Card },
data() {
return {
errorMessage: null,
successMessage: null,
complete: false,
stripeKey: process.env.VUE_APP_STRIPE_PUB_KEY,
stripeOptions: {
// see https://stripe.com/docs/stripe.js#element-options for details
hidePostalCode: true
},
current: {
stripe: {
plan: null,
last4: null
}
},
}
},
methods: {
pay () {
createToken().then(result => {
axios.post('/billing/updateCard', {
token: result.token,
})
.then(res => {
if(res.data.success == true) {
this.successMessage = res.data.message
console.log(res.data.message)
}
if(res.data.success == false) {
this.errorMessage = res.data.message // Display error message from server if an error exists
}
})
.catch((err) => {
if(err) console.log(err)
if(err) this.$router.push('/company/settings?success=false')
})
});
}
}
}
</script>
I have checked that the API key is actually in the data value by doing <p>{{ stripeKey }}</p> and seeing the value show up. So yes the key is there and the key is valid (tested copy/paste into my HTML/JS test)
created(){
this.key=process.env.VUE_APP_STRIPE_KEY;
}
try this, i used this piece of code in my project and it worked... the issue maybe is that your key is not yet initialized when card us rendered idk. maybe key isnt issue at all. try this and let me know if works and we will debug it together.
So I've run into this issue where I'm having a 419 Error code when submitting my AJAX request through my project. I know that this error is due to the CSRF Token not being passed, or not valid.
Story behind this: I've created a "maintenance mode" on my project. This maintenance mode restricts access to the front end by displaying the 503 error page, but still allows my administrators access to the backend to update the site, etc. This is done using some middleware. See the code here on my github page for more information on how I accomplish this functionality.
https://github.com/JDsWebService/ModelAWiki/commit/263a59ebba42688d4a232a5838334b9ee419504c
So maybe this is an issue with the 503 error page on my production environment? I'm not too sure.
I've taken a look at this Question and Answer on SOF, but it doesnt seem to be helping me any.
Laravel 5.5 ajax call 419 (unknown status)
Here is the production site, take a look at the console for more information: http://modelawiki.com/
Here is my code pertaining to the 419 error:
Javascript
$(document).ready(function() {
// CSRF Ajax Token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Add Section Post Button
$('#subscribeButton').click(function(event) {
/* Act on the event */
// Clear Feedback Boxes
$('#valid-feedback').css("display", "none");
$('#invalid-feedback').css("display", "none");
// Input Field
var email = $('#email').val();
var token = $('meta[name="csrf-token"]').attr('content');
console.log(email);
console.log(token);
// Post
$.ajax({
type: 'POST',
url: '/email/subscribe/',
dataType: 'json',
data: {
email: email,
"_token": token,
},
success: function (data) {
// Check Server Side validation
if($.isEmptyObject(data.errors)){
// Show the Feedback Div
$('#valid-feedback').css("display", "block");
// Add the Bootsrapt Is Invalid Class
$('#email').addClass('is-valid');
// Validation Failed Display Error Message
$('#valid-feedback').text(data['success']);
// Animate the Object
$('#email').animateCss('tada', function() {});
console.log(data['success']);
}else{
// Show the Feedback Div
$('#invalid-feedback').css("display", "block");
// Add the Bootsrapt Is Invalid Class
$('#email').addClass('is-invalid');
// Validation Failed Display Error Message
$('#invalid-feedback').text(data.errors[0]);
// Animate the Object
$('#email').animateCss('shake', function() {});
console.log(data.errors);
}
},
error: function (data) {
console.log(data);
}
}); // End Ajax POST function
}); // End Click Event
// On Focus of the Email Box
$('#email').focus(function(event) {
/* Act on the event */
$('#valid-feedback').css("display", "none");
$('#invalid-feedback').css("display", "none");
});
}); // End Document Ready
HTML Form
<div class="input-group input-group-newsletter">
<input type="email" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon" id="email">
<div class="input-group-append">
<button class="btn btn-secondary" type="button" id="subscribeButton">Notify Me!</button>
</div>
<div id="invalid-feedback" class="invalid-feedback"></div>
<div id="valid-feedback" class="valid-feedback"></div>
</div>
Header (This shows that the CSRF token is actually on the 503 error page)
<meta name="csrf-token" content="{{ csrf_token() }}">
Again, this code works on my local environment, but not on my production environment. (I also know that AJAX requests can and are being handled in other parts of my site just fine on the production environment, so I know it's not a server issue and has to do with code)
Just in case here is my controller code as well.
// Store the Email into the database
public function subscribe(Request $request) {
// Validate the request
$validator = Validator::make($request->all(), [
'email' => 'required|email|max:255|unique:email_subscribers,email',
]);
// If the validation fails
if($validator->fails()) {
return response()->json([
'errors' => $validator->errors()->all(),
]);
}
// New Section Object
$subscription = new EmailSubscription;
// Add Name into Section Object
$subscription->email = $request->email;
// Save the Section
$subscription->save();
// Return The Request
return response()->json([
'success' => 'You have successfully subscribed! Check your email!'
]);
}
And my route
// Email Routes
Route::prefix('email')->group(function() {
// Create Post Route for subscribing
Route::post('/subscribe', 'EmailSubscriptionsController#subscribe')->name('email.subscribe');
});
Just in case it can help someone, we experienced the same issue and it was due to a server space disk issue. Therefore, Laravel was unable to write files (sessions.php notably).
I've followed the 'naive' implementation in the project README: https://github.com/mondora/asteroid-oauth-mixin
The only difference in my code from the example is changing the arrow function to a traditional for the usage of this.
asteroid.ddp.on("added", ({collection, id, fields}: { collection: string; fields: {}, id: string }) => {
if (collection === "meteor_accounts_loginServiceConfiguration") {
asteroid.loginServiceConfiguration = {
...asteroid.loginServiceConfiguration,
[id]: {
_id: id,
...fields
}
};
}
});
});
asteroid.getServiceConfig = function(providerName: string) { // ts file
return this.loginServiceConfiguration[providerName];
}
When I do asteroid.loginWith('google')
index.ts:50 Uncaught TypeError: Cannot read property 'google' of undefined
On the meteor backend I also installed meteor add accounts-base accounts-google because I assume this is a dependency.
What am I missing? Thanks!
I've tried adding DDP.loginServiceConfiguration = {} before the snippet above which resolves the error but creates a new error.
asteroid-oauth-mixin.js:787 Uncaught TypeError: Cannot read property 'clientId' of undefined
at getOauthClientId (asteroid-oauth-mixin.js:787)
at Object.getOptions (asteroid-oauth-mixin.js:720)
at Asteroid.loginWith (asteroid-oauth-mixin.js:104)
at LoginForm../src/routes/accounts/auth/LoginForm.tsx.LoginForm.handleLoginWithGoogle (
Also when I run meteor mongo should db.meteor_accounts_loginServiceConfiguration.find().count() be 0 ?
I needed to meteor add service-configuration and setup my configure-accounts.js and create a google clientId for the application.
This gets me to the point where I have a popup and can choose which user to auth with. Then I receive a new error about target origin mismatch, but I'm going to close this question as resolved.
I'am trying to run a Skype SDK on my site, which will allow me to log into Skype initially. The code I'am using is from https://msdn.microsoft.com/EN-US/library/dn962162(v=office.16).aspx but when running the javascript through it complains of an undefined object. Here is the javascript code (ignore the $j, this is needed by us to run jQuery),
/**
* This script demonstrates how to sign the user in and how to sign it out.
*/
$j(function () {
'use strict'; // create an instance of the Application object;
// note, that different instances of Application may
// represent different users
var Application
var client;
Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
Application = api.application;
client = new Application();
}, function (err) {
alert('some error occurred: ' + err);
});
// whenever state changes, display its value
client.signInManager.state.changed(function (state) {
$j('#application_state').text(state);
});
// when the user clicks on the "Sign In" button
$j('#signin').click(function () {
// start signing in
client.signInManager.signIn({
username: $j('#username').text(),
password: $j('#password').text()
}).then(
//onSuccess callback
function () {
// when the sign in operation succeeds display the user name
alert('Signed in as ' + client.personsAndGroupsManager.mePerson.displayName());
},
//onFailure callback
function (error) {
// if something goes wrong in either of the steps above,
// display the error message
alert(error || 'Cannot sign in');
});
});
// when the user clicks on the "Sign Out" button
$j('#signout').click(function () {
// start signing out
client.signInManager.signOut()
.then(
//onSuccess callback
function () {
// and report the success
alert('Signed out');
},
//onFailure callback
function (error) {
// or a failure
alert(error || 'Cannot sign in');
});
});
});
When I run this through, it doesn't enter into the "Skype.initialize({" code but jumps to "client.signInManager.state.changed(function (state) {", which is when it throws this error "Uncaught TypeError: Cannot read property 'signInManager' of undefined". When running this though the source debugger in chrome it shows that "Application" is undefined and that "client" is also undefined. So my question is why aren't these 2 objects getting initialised in the Skype.initialize code?
You will have to add the listener, after the client is initialized. So in the initialize "success" callback. The way you have it implemented at the moment, the script tries to add the listener before the client is initialized, on an undefined object attribute, hence the error.