I have a SPA application developed using AngularJS. Access to the application can take place in two ways:
1) By entering the address (example) www.example.com, or
2) By clicking on a link like http://www.example.com?do=this¶m=1234
When the application is started, it examines the URL and, if suitable parameters are found, it prompts the user to log-in/register and then goes to a specific page within the application where the visitor is supposed to perform some activities related to the action this with parameter 1234.
Traversal through pages is handled by the javascript command:
$window.location.href="#/other_page;.
This works ok so far, except that the URL is kept with the parameters. As such, whenever the application decides that it needs to go to another page, the URL (in the address bar of the browser) would look like:
http://www.example.com?do=this¶m=1234#/other_page
which is messing the behavior of the application.
My question is: Once I was able to extract from the original URL the received parameters, I want to clean the url and proceed with its normal contents, which would be something like:
http://www.example.com#/other_page.
How can this be achieved?
Thanks in advance.
Using $location service clear the search query params from address bar of the browser.
Syntax is:
$location.search({});
For Example After finished your login or register page.
$scope.login = function(){
// Check your logic and clear search params
if($routeParams && $routeParams.src)
{
$location.search({});
$location.path($scope.baseurl+$routeParams.src);
}
};
Here am using $routeParams service you could also check $window.location.search
You can use $location service. It says:
Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.
So, basically you can do:
$location.path('other_page')
which should clear the URL and set this path instead.
Just found a working solution. I use the following command:
$window.location.href = location.protocol +
"//" +
location.host +
"/index.html#/other_page" ;
which makes the trick. Perhaps not the most elegant, but it works as needed.
Thank you guys (#vivek and #prakashA) for your support.
Related
TLDR; Is there a way to directly redirect to a module while running the serverside code? Taking into account the modules filter settings etc.
Hello, quite new to SN so sorry for the newbi question :)
Basically I need to redirect the user to a different module after running some serverside code.
The module have some filter setting set in "Link type". Guess I could copy these and hard code them into the redirect via action.setRedirectURL(), but that wouldn't update should the modules filter change.
Help would be much appreciated, thank you :)
I've done something similar so that records could be opened in a new window. This UI action will open a knowledge article in kb portal.
function openRecordInKBPortal() {
var url = 'kb?id=kb_article&sys_id=' + g_form.getUniqueValue();
g_navigation.openPopup(url);
}
I am using .NET Core (+IdentityServer) backend along with the SPA React application.
Whenever I change the page inside my SPA application the url updates. (for example: / to /users).
The issue:
Whenever I refresh the page with F5 or want to go to the specific component connected to route using url only I get the following action inside my browser:
Basic state when pressing enter in the url: localhost:3000/users
After pressing enter: http://localhost:3000/signin-oidc#id_token=...
When the user is logged in the page redirects to the main url: localhost:3000/
So, basically I am always redirected from the current url to the main one.
How can I make the application redirect back to the localhost:3000/users on the refresh or url change using oidc-client in react?
What is the best practice to allow user to be able to refresh the page (or go to the specific url) keeping in mind that the user is already authorized?
If I understand you right and you are using the oidc-client-js library to implement Open Id Connect then my NodeJS Code Sample may be useful to you, and the Authenticator class in particular.
RESTORING THE PRE-REDIRECT LOCATION / DEEP LINKING
This is managed via code like this, which is also useful if the user has bookmarked a location within your app and needs to login first:
// Store the state when redirecting the page
await this._userManager.signinRedirect({
state: location.hash,
});
// Restore it afterwards - and remove tokens from the URL
const user = await this._userManager.signinRedirectCallback();
history.replaceState({}, document.title, user.state.hash);
RELOADING THE PAGE OR OPENING A NEW TAB
This is best managed via silent token renewal using the Authorization Server session cookie, so that there is no top level redirect.
await this._userManager.signinSilent();
RUNNING MY SAMPLE AGAINST YOUR SYSTEM
It may help you to have something to compare against, by running the sample against your own system, by changing the details in the SPA and API config files to point to Identity Server.
I am working on an add-in and it's an Angular single page application. Currently it has only one controller ( one screen ). Based on the documentation:
If your add-in uses client-side routing, as single-page applications
typically do, you have the option to pass the URL of a route to the
displayDialogAsync method, instead of the URL of a complete and
separate HTML page.
HTML
<button type="button" class="ms-Button ms-Button--compound" id="addPlaceholder" ng-click="openPopup()">
<span class="ms-Button-label">Open Popup</span><span class="ms-Button-description">Open Popup</span>
</button>
Controller code
researchApppBuilderModule.controller('researchcontroller', ['$scope', '$location',
function ($scope, $location) {
var urlRoot = $("base").first().attr("href");
$scope.openPopup = function () {
var dialog;
Office.context.ui.displayDialogAsync(urlRoot + '/app/research', { height: 30, width: 20 },
function (asyncResult) {
dialog = asyncResult.value;
});
}
}]);
I have tested this route within the Add-in and it's working. So, I know the route is correct.
So, this code opens up a dialog but with an error:
ADD-IN ERROR:
Sorry, we cannot load the add-in. Please make sure you have network and/or Internet Connectivity. Click "Retry" once you're back online.
Error Screenshot
I tried searching in the documentation but couldn't find anything. What am I missing?
Although you "can" pass a route to the displayDialogAsync method, I don't recommend it for reasons given in the note just below the paragraph of documentation that you quoted: An entirely new instance of your add-in is launched in the dialog. This means that the app goes through its initialization code. This usually confuses the routing strategy and the dialog ends up trying to navigate to a URL that is an invalid combination of the default route and the route that you passed to the method, like https://example.com/app/#/app/research.
I recommend that create a research.html page and pass the URL of it to the dialog (as this sample does: Word-Add-in-AngularJS-Client-OAuth). This may seem to deviate from the purity of a single page app; but you're doing that anyway when you pass a route to the method, because you are really passing a second instance of the app's "single page" (because you're launching a second instance of the whole app).
Otherwise, you can troubleshoot, by having the callback to displayDialogAsync log the asyncResult.error.code and asyncResult.error.message properties to the console. I also recommend that you read Use the Dialog API | Handle errors and events. You could also use the Fiddler tool or the Charles tool to see what URL the dialog is trying to open.
Finally, your code doesn't show what the urlRoot is. Be sure it is an absolute URL including the HTTPS protocol.
I'm not sure if I have used the right terminology here but Is there a way I can get the base URL of my app?
My problem Is I have a login service that has a hardcoded redirectUrl now when I'm in development, I'm obviously using http://localhost:4200 but when I've published I'm using my website name https://mywebsite.com now Is there a way I can grab that and not anything after so like If I go to https://mywebsite.com/thisadad I only get back https://mywebsite.com?
Now I know I could have a function on the ngOnit of my app.component where I grab the URL on first load pass it to a service and then use it throughout the app but that wont work If I say enter the page at https://mywebsite.com/newpage is there a better way to do this??
The reason I'm using a hardcoded redirect is because I'm using auth0 as my authetication
Any help would be appreciated
If i understand the situation currently,
In your case you should use a global variable named
'environment'.
Which you configure during build ( ng build )
More on this in this article:
https://medium.com/beautiful-angular/angular-2-and-environment-variables-59c57ba643be
I have a site on Vue with vue-router navigation which needs to work with google drive. I've set up the app, tokens uri in the google developer's console and it works fine on its own:
https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id=668711006022-7igan4in4ob7ngtsmqjh8ld7j8hs5t16.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Ftwine.teivaz.com/auth&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive
But when it came to integrating to vue-router navigation I faced a problem. After making a request to the google ouath2 server it redirects me to a specified address with the token in url params like this:
http://twine.teivaz.com/auth#access_token=ya29.Ci8o1gdfpkN51F3yjAbW-v9r-JN9YD3ze5B2123rvv62KuFc5b1OgzF-9XQ&token_type=Bearer&expires_in=3600
I've came up with several solutions:
Set authorized redirect URIs to match the vue-router's format to simply read as parameter, like this:
http://twine.teivaz.com/#!/login/
But the google console does not allow me to do that giving a message
Invalid Redirect: http://twine.teivaz.com/#!/login/ cannot contain a fragment.
It seems that I won't be able to paste in google console my vue-readable URI from the first approach. Is it supposed to be like this or it's a bug in the console?
Capture token from url from default page. But in the vue-router I have a default redirect which drops all parameters:
TwineRouter.redirect({
'*': '/stories'
});
It should be there for all url without parameters.
Is there any way to parse the parameter before redirect occurs and maintain behaviour for all cases when there is no token in parameters?
Create another page that will simply save the token to cookies and redirect to the index. And set it up in the google console:
http://twine.teivaz.com/login.html
It seems that this option is a poor design but it might actually work.
Is it the best option among given? Is there anything I missed?
a bit too late I think, but you can use
mode: 'history'
in vue-router, this eliminates # thing from the URL.
http://router.vuejs.org/en/essentials/history-mode.html