I'm new in VueJS and have a problem: I can authenticate a user with adldap2 in php. But how can I check in VueJS whether the user is authenticated? The login expires after 2 hours and the user should not be able to interact with the website when not longer logged in. By the way, I also need "Auth::user()" in backend.
So I try to find a way to get something like let user = Auth.user; in VueJS and Auth::user(); in PHP.
I need it in VueJS for things like that:
<div class="row" v-if="Auth.checked">
<div class="col-md-12">
<!-- "navigation" is a custom component in VueJS -->
<navigation :items="menuItems" v-on:ask-upgrade="showUpgrade = true"></navigation>
</div>
</div>
I get a solution. Here is the tutorial what I used for my problem. My auth.js file is very larger now but I need a lot of auth stuff for routing.
Related
I've been trying to update Google sign-in button on my website from old javascript method to new identity library, it works fine when I use callback function but the redirect option (for server-side verification) doesn't send credentials in POST request:
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="my client id"
data-ux_mode="redirect"
data-login_uri="http://localhost:3001/api/google-auth">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
In POST request it sends 'g_csrf_token' cookie, but doesn't contain 'credential' or 'g_csrf_token' in request body or parameters as mentioned in the document here
https://developers.google.com/identity/gsi/web/reference/html-reference#server-side
I believe I've set OAuth 2.0 Client ID and Consent Screen correctly. Any help will be appreciated
In my Vue app I am using Firestore Authentication with Google Sign-in enabled. Once the user signs in, I receive some basic information including the photoURL. However, when I try to render it in a component, I am getting a 403 error.
Vuetify component:
<v-img :src="user.photoURL" /> <!-- https://lh3.googleusercontent.com/a-/xxxxxxxxxxxxx -->
Error:
GET https://lh3.googleusercontent.com/a-/xxxxxxxxxxxxx 403
I tried applying the solution of adding the referrerpolicy="no-referrer" attribute to the component, but it didn't work.
I think you have a little mistake in your solution.
For noreferrer policy you must to try:
rel="noreferrer"
Or:
referrerpolicy="origin"
I think you have a little mistake in your solution. For optional chaining you must try:
src="user?.photoURL"
or
src={user?.photoURL}
I'm trying to build a Blazor application that is hosted on the server and the starting point is inside a razor page.
Something like that:
<component type="typeof(Main)" render-mode="ServerPrerendered" param-Data="#simple"/>
My questions are:
What happens if the razor page has an Authorized Attribute, is all blazor code than correctly secured with the authentication ?
Is it impossible to call the blazor app without the razor page circuit id ?
What if my razor page does have a custom authentication based on database values inside the OnGetAsync method - do I need to redo some of that stuff inside blazor or does the stateful component only gets rendered when the razor page works ?
What happens if I have an arbitrary if/else block that would have a button call, would that button call be guarded by the state ?
Something along the lines:
#if (HasPermission)
{
<button type="button" onclick="MutateDatabase">MutateDatabase</button>
}
I assume you run Blazor Server (At the time of writing WASM is still in preview and will be quite different security-wise).
The documentataion states that Blazor does indeed integrate with ASP.NET Core identity:
Blazor Server apps include a built-in AuthenticationStateProvider service that obtains authentication state data from ASP.NET Core's HttpContext.User. This is how authentication state integrates with existing ASP.NET Core server-side authentication mechanisms.
Now, to your questions:
Given your rendering mode, for Blazor to kick in, the Razor page has to render an initial state and mark the element where Blazor is to manage the view later on. The way AuthorizeAttribute works (I presume this is what you meant?) will block the page from rendering, so this should prevent Blazor from starting altogether - you will get redirected away to authenticate. Once your users are past that gate though - be aware that Blazor handles [Authorize] on child controls differently:
Only use [Authorize] on #page components reached via the Blazor Router. Authorization is only performed as an aspect of routing and not for child components rendered within a page. To authorize the display of specific parts within a page, use AuthorizeView instead.
(this doesn't seem to be your case, but I'd put it here just in case)
I'm not entirely sure if I understand the statement here: circuit is the term MS uses to identify the slice of server where your application instance lives while it's displayed to a client. The connection is maintained via websockets and is generally scoped to a session (check out cookies and url parameters to your /_blazor endpoint). The user is however not guaranteed to have same circuit throughout application lifetime (due to connection issues or server load-balancer config) - and it is fine, you are expected to handle state persistance across circuits yourself.
This case I believe will be the same as (1): you don't get Blazor to start until hosting Razor view is rendered.
It's probably best to follow Blazor's security management page: you have a couple of options to ensure you're catering for authenticated users:
Use <AuthorizeView> to control what gets rendered:
<AuthorizeView>
<Authorized>
<button type="button" onclick="MutateDatabase">MutateDatabase</button>
</Authorized>
<NotAuthorized>
<p>You're not signed in.</p>
</NotAuthorized>
</AuthorizeView>
You can technically use an if (user.IsInRole()) statement, but that might not get updated when User AuthenticationState changes.
If this is not sufficient, you can either pick up cascading AuthenticationState parameter or look at implementing your own AuthenticationStateProvider
Where have I to authenticate in a SPA application using laravel and vuejs? I'm developing a normal web application with laravel and blade. Nothing out of ordinary, but, now, I'm trying to make a spa application using laravel and vuejs - backend separeted from frontend. Where would I have to authenticate in this example? In php routes or vuejs routes or both? My laravel app, only laravel, it works as expected, user permissions, user session, a normal application but in vuejs, how I can do the same verifications as well?
Without knowing you exact Laravel authentication setup I would just say you authenticate through ajax at the same route as you do in Laravel. In a fairly standard setup using axios I do it like this.
ajaxLogin(){
axios.post('/login',{
email: this.loginEmail,
password: this.loginPassword
}).then(function (res) {
this.getCrsfToken(); //refresh crsf token
}.bind(this));
}
Notice the getCrsfToken function here. This may be necessary if your SPA (page) is not being refreshed when logging out and back in. Like in the case of the session expiring while the browser window is open. You would use something like the following to refresh the crsf token if you are including it the standard Laravel way in the header.
In your Routes or Controller
Route::get('/getToken', function(){
return csrf_token();
})->middleware('auth');
In your Vue component
getCrsfToken(){
axios.get('/getToken')
.then(function(res){
// Refresh crsf token from session after login
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = res.data;
});
},
For a web application that doesn't reload the page with in 3600 seconds, whats the best way to keep the session alive with google plus?
If I use the html sign in button, is there a javascript call to refresh the session?
Do I need to refresh the token, but does that update the session?
Would it be best to call the server and refresh the token, but then I need to update the client cookie?
Should I reload the page, this would suck b/c its an application that shouldn't do that?
Can I ask the javascript to sign in again, but I get a popup blocker?
How do I deal with the 3600 token expiring in a web application that doesn't refresh the page?
<span id="signinButton">
<span class="g-signin" data-callback="signinCallback"
data-clientid="xxxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-accesstype="offline"
data-approvalprompt="auto"
data-theme="dark"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login
https://www.googleapis.com/auth/plus.me
https://www.googleapis.com/auth/userinfo.email
email">
</span>
</span>
You can use the gapi.auth.authorize call of the JS Client library (which will be loaded with the Sign-in JS script), providing the same parameters you did in the Sign-in Button, and using 'immediate': true. Since the user already authenticated before, this will refresh the token automatically (if necessary).