salesforce - how to make API_Session_ID available to javascript - salesforce

I have a javascript app running in a home page component. It calls into a web service, which in turn calls the salesforce API. I would like to use the API_Session_ID variable to save re-logging in. How do I expose this to the javascript running in my home page component? Ideally I would like to use apex to render a small piece of script, initialising a javascript variable with the API_Session_ID variable, onto all pages, but I can't see how to do this.
Note - I can't use VF as the app is running in a home page component. The normal solution for that (run as VF in an iframe) is not available to me as I need to access the javascript objects in the main page, which I can't do from an iframe.

Ok so I figured this out. There's a value 'sid' in the session cookie, and that's what one needs with a bit of tweaking. Easy when you know how! Here's the link:
http://forums.sforce.com/t5/forums/forumtopicprintpage/board-id/general_development/message-id/7209/print-single-message/false/page/1
It's a bit out of date. I pass the cookie sid value, and window.location.host to my php web service. The php to make these values work is:
$sidparts = explode("!", $feed->sid['value']);
$location = "https://".parse_url($feed->server['value'],
PHP_URL_HOST)."/services/Soap/u/20.0/".$sidparts[0];
$sessionId = "{$feed->sid['value']}";

I've tried to do the same thing a few times as well. Unfortunately, I haven't had success without VisualForce.
I did find a discussion thread on the topic a few days ago, though.
http://boards.developerforce.com/t5/AJAX-Toolkit-S-Controls/Detect-current-user-with-AJAX-toolkit/m-p/277241#M8485
Also, it sounds like you know this, but to get the Session ID using VisualForce:
<script type="text/javascript">
var __sfdcSessionId = '{!GETSESSIONID()}';
</script>

Related

Best way to load customer parameters in a multi-tenant angularJS application

We have a multi-tenant Angular JS single page application. The routing for the application uses a customer identifier as part of the URL - #/home/<KEY> or #/search/<KEY>/<search term> for instance. In theory the first page served could be of any type. Each page calls an API using the customer key and other values picked up from the URL to get data for the page. So far so good.
We have some parameters - a logo, copyright statement, default language (for internationalization) - that can be loaded using a separate API call that also uses the customer KEY. These parameters need to be available as strings in partials, to drive the internationalization and perhaps in controllers.
The question is where to call the API to get these parameters and how to set them / make them available for the rest of the app. I have looked at a bunch of questions in this general area but can't find a concrete suggestion. Should we use a config in app.js? Call another script from index.html?
Appreciate people's advice.
The right place would be to make an API call immediately after authentication to get the various Customer specific configuration data like the Customer settings for logo, language and then put them in the session storage of the browser.
I have done an implementation using Microsoft ADAL js as per the documentation given here. https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/README.md.
You can do this Api call in the login success event handler or similar ones in angular.
Example:
$scope.$on("adal:loginSuccess", function () {
$scope.testMessage = "loginSuccess";
});
HTH

How to set dynamic url in pluoplad-angular-directive?

I am trying to use plupload-angular-directive in my Angular SPA. The problem is, the upload URL is not a constant and is generated on the server side every time I need to upload something.
So, as mentioned in the docs I have used the pl-url directive to set the URL on the front-end like this:
<button pl-upload=""
pl-auto-upload="true"
pl-files-model="multiFiles"
pl-url="{{imgActionUrl}}"
pl-progress-model="percent">Upload Images</button>
where, the imgActionUrl is fetched by my Angular controller and assigned to the $scope.
Debugging the application clearly showed that the URL is being properly set but even then, when the upload actually happens, it makes a POST to /upload.php rather than to the address mentioned in the directive.
Why is this happening?
After a lot of digging around, I posted an issue on the github page of the project:
https://github.com/sahusoftcom/plupload-angular-directive/issues/43
But it seems nobody is maintaining this repository and the owner redirected me to another library, jQuery-File-Upload.

Angularjs with subdomain wildcards (best way)

guys.How is it going? I am having a hard time trying to figure out some stuff here. No success so far. The thing is...
How does Angularjs work with subdomain wildcards?
Since I can't inject location service in the app.config, I needed some way to track the url I am accessing in every request, without having to check when every single angularjs controller is loaded, using $routeProvider and locationProvider
* UPDATE *
I have a domain for a Rails 4 application(as an API), and I am using angularjs to render the views and everything else. For the app, I will have a subdomain for a specific purpose. But users will only be able to access the subdomain after logged in, and this will create a subsubdomain for them. So, I need to do something like this:
http://domain.com (rendering the regular app)
http://subdomain.domain.com (only to log in)
http://user1.subdomain.domain.com
http://user2.subdomain.domain.com (both rendering something completely different from the regular app rendering)
All this using routeParams. I used angular-devise to login.
Any ideas?
Thanks in advance!
If someone is trying to figure out the same thing, here is what I did:
In the routes.rb file, I pointed routes with subdomains to a rails controller:
get '', to: 'controller#action', constraints: { subdomain: /.+/ }
I created to angular modules. One for the regular app, and the other for to the app with the subdomain
In the application.html.erb file, I make the ng-app dynamic, so angular will be able to know which app I am talking about. angular_app returns the string to one of the angular_modules:
ng-app="<%= angular_app %>"
After that, angularjs routeParams is in charge to render the app.
Thank was it.

Passport.js, Express.js, and Angular.js routing: how can they coexist?

I apologize this question turned out a bit long, but I have worked on this for some time and really needed to explain all the story.
Background: App based on MEAN stack, trying to authorize Facebook logins using Passport.js.
Following Passport.js guide I implemented something similar to:
// HTML
Add a Facebook login
// send to facebook to do the authentication
app.get('/connect/facebook',isLoggedIn, passport.authorize('facebook',
{ scope : 'email' })
);
// handle the callback after facebook has authorized the user
app.get('/connect/facebook/callback',
passport.authorize('facebook', {
successRedirect : '/profile',
failureRedirect : '/profile'
}));
Notice the target=_self in the html in order to skip Angular routing.
Clearly, authorization works fine. However, redirection does not work, as the routing is handled by Angular. After authorization I never land on /profile (but on the default Angular route).
Therefore, I tried with a custom callback as suggested by Passport.js here, with the hope of passing json data to Angular, and let Angular do the routing. I ended up doing something like:
// In the controller
$http.get("/connect/facebook").success(function(data){
// here I wait for json data from the server and do the routing
});
// I call this route from Angular
app.get('/connect/facebook',isLoggedIn,passport.authorize('facebook',
{ scope : 'email' })
);
// But Facebook lands here!
app.get('/connect/facebook/callback',function(req, res, next) {
passport.authorize('facebook', function(err, user, info) {
res.json({something:smtg});
...
Clearly custom callbacks work for local-login, as Passport.js explains. But here do you see the problem? I call /connect/facebook from Angular, but I should receive some json from /connect/facebook/callback.
I am about to give up Passport, but before this, do you see any solution which would allow landing on /profile after FB authorization, perhaps with a custom message? Many thanks for reading through.
EDIT:
The same question had been reported as an issue on the Passport-Facebook GitHub account. Some additional attempts have been posted there, but not quite the fix yet.
This is a bit more in depth than can be described in one answer, but I'll try to start pointing you in the right direction.
Essentially, Angular.js routes are not really HTML routes at all, but an internal route structure that happens to use the URL for use of the end user. Remember that Angular.js is a client script, and that a full page reload is not desired, as this will reload the entire script. Therefore, /# is used to trick the browser into jumping to a specific bit of code within the already loaded script. (as opposed to the traditional anchor location in the HTML document). Unfortunately (or fortunately), HTML 5 mode allows you to hide the /# part of the url, so instead of seeing http://somesite.com/#/someroute you just see http://somesite.com/someroute. Rest assured, however, that the /# is still there. Angular.js uses the HTML5 pushState (AKA HistoryAPI) to perform the magic replacement.
Given this, if you have called a server route, you are outside the Angular.js script, and any call to load the angular script again will start from the very beginning. You can't actually call your Angular.js route from the server without a full reload. Therefore, you are really doing a double route redirect here. Your server should be calling it's default route for angular, appending /#/someroute to the call. The angular.js page will load, parse off the /#, and redirect to the correct angular route. Keep in mind, however, that if there was any dependency on already loaded objects, those are no longer in memory. Therefore, any route accessed this way should operate as if it is an entry point to your application.
Effectively, you should try using successRedirect : '#/profile', keeping in mind that the profile route in angular should be treated as an app entry point.
Hopefully this gets you started.
If #Claies's way is not working, is it possible you have not get rid of the #= fragment from the facebook callback.
Have a read of this post

Angular Protractor test session persistence

I'm working on e2e tests for a web app and I would like to log in a user and persist their session.
Specifically the following scenario:
The log in form is posted with valid credentials.
Angular routes the user to a landing page.
I call browser.get( /* the current url */ )
I expect the current URL to be the same, instead of my user getting kicked back to the log in screen.
We're using HTTP header based auth and I don't know how to configure this scenario for testing purposes.
Is it as simple as activating cookies somewhere? Or maybe supporting the auth headers via a config?
I managed to solve this be simply adding browser.sleep(1000) in before calling browser.get( /* the current url */ ).
Basically Protractor was hammering on the router to fast and my app was kicking me out before auth creds were set. Or, perhaps, might be the HTML5 routing takes a little time to process (our deep links are hashed, but then angular converts the hash to HTML5 routes).
You can use browser.waitForAngular(); too.
You can use promises like this
goAfterLogin: function(){
browser.get('http://www.example.com').then(function(){
return this; //or other return
}).then(function(){
return this;
});
}
Its up to you how will you use it (you as well can create promis with waitForAngular() )

Resources