Basically I want a Login, Logout and Registration Functionality in my application using JavaScript
This is my Registration Page : https://i.stack.imgur.com/KY4vz.png
This is my Login Page : https://i.stack.imgur.com/IBEff.png
I can't find any question here.. if you want to find out how to validate forms using JavaScript just google it..
But my advice for login / register forms authentication is that it's must be done server-side and not on the client's side because if you will make it JavaScript like this:
var passInput = document.getElementById("passInput").value;
if(passInput == "correct password"){
//...
}
The client can just open the source code and simply see the correct password..
What you should do is to validate the form on server side so the client can't simply view the correct password.
Related
I am new to javascript. I'm creating a login webpage with auth0, if the user enters the correct id/password the auth0 login API will redirect them back to the application, they are calling from based on their redirect URL.
I want to add a feature where if they don't accept terms and conditions, they would be redirected back to the application they are calling from via redirect URL.
Is it possible? I tried to search online but could not find any proper documentation. can anyone please advise?
shouldn't there be any param in the URL when they get directed to your application? i think there should be a param in the URL that you can use to redirect them back.
I found the solution, I had to user callback URLs with the error message.
Solution for this in Vue.js
<a v-on:click="f1()">..</a>
f1: function() {
window.location.href = "myapp://callback?error=MyCustoomrErrorMessage";
},
I'm developing an application which I'm writing in Angular 6 framework.
Currently, I would like to add user login by social media like: Facebook, Google, Twitter, Github, LinkedIn.
I have a four buttons for these actions in my SocialLoginComponent's template:
Now I'm trying to implement user login by facebook after clicking on CONNECT WITH FACEBOOK button which has an click angular action:
<button (click) = "loginWithFacebook()" class="social-button" id="facebook-connect"> <span>Connect with Facebook</span></button>
Implementation of function loginWithFacebook looks like:
loginWithFacebook() {
this.auth.loginByFacebook(this.apiKey, this.redirectUri).subscribe({
next: (v) => console.log(v)
});
}
Here auth is of course service injected by constructor:
constructor(private auth: AuthService) {
}
Below I show implementation method loginByFacebook method in my AuthService:
loginByFacebook(appId, redirectUri) {
const facebookParams = new HttpParams()
.set('client_id', appId)
.set('redirect_uri', redirectUri)
.set('response_type', 'token');
return this.http.get(this.facebookUrl, {params : facebookParams});
});
where facebookUrl is the AuthService property:
private facebookUrl = 'https://www.facebook.com/v3.1/dialog/oauth';
I'm setting up here of course parameters based on My Facebook App.
I'm trying to invoke that url by get method in order to obtain a facebook login dialog based on description from tutorial: manualyBuildALoginFlow. I wouldn't like to use JavaScript SDK in my solution.
In current state when I'm clicking on the faecebook button, there is response like below:
I would like to obtain modal dialog with confirmation like below:
In my Get request I add parameter response_type = token in order to obtain Social token. On the below diagram I show what flow I'm trying to achieve:
On above diagram my server is laravel framework which currently handle user login and returns JWT token in order to check that user's logged in to application. Next this token I save in local storage by Angular6 framework.
How could I obtain that redirection with modal window in Angular6? What I'm doing wrong is that redirection dosen't work? What first step should I do in order to implement such authorization using facebook?
I would be greateful for advices.
Best Regards
I'm trying to invoke that url by get method
Which means an AJAX request … and that is of course not possible.
You need to redirect the user to the login dialog URL, not try and request it in the background - for the simple reason, that users need to be able to verify via the browser address bar, that they are indeed entering their login credentials to Facebook, and not some phishing site. If you requested it via AJAX and displayed it “within” your page, that would not be possible.
I've implemented method as misorude suggests in my Auth Service:
loginWithFacebook(appId: number, redirectUri: string) {
window.location.href = `https://www.facebook.com/v3.1/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&display=popup`;
}
Currently the page redirects to my Facebook app. Next I confirm my login by Facebook in dialog window. Then browser redirect back to my Angular app and in my url I have Social token from Facebook like on the picture below:
Next I'd like to obtain this token from url and then to implement the data flow as below:
How should I correctly get an access token and post to my backend Server as on the schema above?
I would be greateful for help
Best regards
Is there a way to send username and password to a url of a login web page?
For example, if the login web page contains 2 textboxes : user name and password and a login button, is there a way to send to the url the credential in order to go directly to the next page coming after the login?
The url for the login page looks like:
http://[ip address]/jsp/login.xhtml
I tried to send the username and passord as following:
http://[username:password]/[ip address]/jsp/login.xhtml
http://[ip address]/jsp/login.xhtml?[username:password]
If there is a way to do it by sending the command through a batch file?
If it can be done using c# or javascript it is also fine.
The best option is Javascript. It can easily run from a plugin of your browser.
(I'm using 'Custom Javascript for Websites', a chrome plugin: https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija)
Firstly you navigate to the login page and check the source code for the following ID's:
- Username-inputbox
- Password-inputbox
- Submit button
Knowing these things, we can add this to our plugin: (Fill in the id's at the right places)
// First we check if we're on the right page
if (window.location.href == "URL")
{
// Find the ID's of the corresponding inputs
document.getElementById("username").value = "user0";
document.getElementById("password").value = "user0scode";
// Then click the submit button, just as we do
document.getElementById("btnSubmit").click();
}
There is free tool called Fiddler. It monitors/debugs all the traffic on your machine i.e. using browsers or any other medium. You can try capturing the action/request behind the login button using Fiddler, and then mutate the same action/request and you will be able to change the username/password for that action/request.
Download from here, and read this.
Hi I use spring security to define some role's on server side and to limit the access on some Restful address. The server side is not a problem. The javascript is a problem. I have some link on the client side that I will disable when the user has not an admin role.
What is the bast way to do this in javascrip/jquery? Is there a script that manage this?
P.S.: I'm a javascript newbie
On server side the roles are managed by spring security to avoid unautorized users to get access on them. What i would know is: is there a script that helps me to manage all link that i whant obfuscate to normal user on client side (centralized) or have I to go manually to every 50 link on my page and add a check on the role?
It would be more appropriate to prevent the link from even appearing from the server side. Because if you just disable it, any smart user can just view source and get the link and run it. But here is how to disable a link
$('.my-link').click(function () {return false;});
Rather than returning false, you can event.preventDefault()
/// Disable all Links with a class
$("a").click(function(event){
event.preventDefault();
//// check if admin
if( isAdminFunc() ){
handleThisLinkClickForAdmin();
}else{
//// non admin users can not access links..
}
});
finally I found how to do. On back-end side I don't have to change anything.
On Front-end side I have to add a taglib on my html page:
<%# taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
After I can securize the block that only the user with this role and up can access:
All normal user can access
<sec:authorize access="hasRole('admin')">
Only user with Admin role cann access
</sec:authorize>
In this example the first link is accessible for all, and the second only for user with the 'admin' role.
I have a web app and I will like to integrate mailchimp such that when a user clicks the signup button on the page, the user's email is added to a mailchimp subscription list but I'm having difficulty in doing so. The problem is, the button on the page is created in a javascript file using extjs. I do not have that much experience in developing web applications . I already downloaded the api for integrating with php. I saw this: " AJAX Mailchimp signup form integration " but it seems to have security issues.
Can anyone help explain how to go about this?
Have the ajax call directed to your server, with the user's email.
From there, use the API (you downloaded) to add the email, and return the outcome of their response to your client.
When you do it behind the scenes (your server to theirs), there is no security risk, as you are not exposing your API key.
Client side code:
Ext.Ajax.request({
url: 'add_mail_to_chimp.php',
params: {
email: theUser_sEmail
},
success: function(response){
var text = response.responseText;
alert ('yay' + text);
}
});