How to access Shibboleth SP Attributes in AngularJS Application

问题

I am new to SSO as well as Shibboleth.

I have successfully implemented Shibboleth SP on an Apache Server. The user is getting authenticated against IDP whenever the user tries to access a protected resource.

Basically, Shibboleth SSO has the following 6 steps:

User Accesses Protected Resource
SP Determines IdP and Issues Authentication Request
User Authenticates to the IdP
IdP Issues Response to SP
Back to the SP
Back to the Protected Resource

My client app is purely developed using AngularJS 1.6.

Everything is working fine till Step 6. My question is:

In Step 6: How do I access the Shibboleth SP attributes such as First Name or Last Name in my AngularJS Client App? Or is it even possible to access those attributes directly in the AngularJS app?

Shibboleth Wiki does not mention anything about accessing attributes using AngularJS.

Please. Any help | guidance | suggestion | feedback will be greatly appreciated.

[UPDATE]

httpd.conf

My httpd.conf is very simple. The only extra configuration I did for Shibboleth is as below. Rest everything is default.

LoadModule mod_shib /usr/lib64/shibboleth/mod_shib_24.so

ServerName 10.63.32.125

<Location /licweb>
  AuthType shibboleth
  Require valid-user
  ShibRequireSession On
  ShibUseHeaders On
</Location>

shibboleth2.xml

This is also a very simple file.

<SPConfig xmlns="urn:mace:shibboleth:2.0:native:sp:config" 
    xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata" clockSkew="180">
    <ApplicationDefaults entityID="https://www.example.com/licweb/shibboleth" REMOTE_USER="eppn persistent-id targeted-id">

        <Sessions lifetime="28800" timeout="3600" checkAddress="false" relayState="ss:mem" handlerSSL="false">
            <SSO entityID="https://my-sso-url">
                SAML2 SAML1
            </SSO>
            <Logout>SAML2 Local</Logout>

            <md:ArtifactResolutionService Location="/Artifact/SOAP" index="1" Binding="urn:oasis:names:tc:SAML:2.0:bindings:SOAP"/>
            <Handler type="MetadataGenerator" Location="/Metadata" signing="false"/>
            <Handler type="Status" Location="/Status" acl="127.0.0.1"/>
            <Handler type="Session" Location="/Session" showAttributeValues="true" />
        </Sessions>
        <Errors supportContact="ankit.prajapati@yahoo.com" logoLocation="/shibboleth-sp/logo.jpg" styleSheet="/shibboleth-sp/main.css"/>
        <MetadataProvider type="XML" file="MetaData.xml"/>
        <AttributeExtractor type="XML" validate="true" path="attribute-map.xml"/>
        <AttributeResolver type="Query" subjectMatch="true"/>
        <AttributeFilter type="XML" validate="true" path="attribute-policy.xml"/>
        <CredentialResolver type="File" key="sp-key.pem" certificate="sp-cert.pem"/>
    </ApplicationDefaults>
    <SecurityPolicyProvider type="XML" validate="true" path="security-policy.xml"/>
    <ProtocolProvider type="XML" validate="true" reloadChanges="false" path="protocols.xml"/>
</SPConfig>

Session

I also get the Session at the URL: http://10.63.32.125/Shibboleth.sso/Session

Miscellaneous
Session Expiration (barring inactivity): 473 minute(s)
Client Address: 10.63.32.125
SSO Protocol: urn:oasis:names:tc:SAML:2.0:protocol
Identity Provider: https://my-identity-provider
Authentication Time: 2018-06-21T19:19:16.937Z
Authentication Context Class: urn:oasis:names:tc:SAML:2.0:ac:classes:AuthenticatedTelephony
Authentication Context Decl: (none)

Attributes
displayName: Doe,John
givenName: John
mail: john.doe@yahoo.com
persistent-id: https://my-persistent-id
sn: doe

I want to access this attributes on my AngularJS Client Website running at URL: http://10.63.32.125/licweb

Any help will be greatly appreciated. THANKS.

回答1:

I don't think you can directly access the attributes from angular js. You might need some server side support (ajp in case of java using servlet) to read the attributes.

See the related thread for some info.

回答2:

The attributes live inside the headers when the response comes back from IdP. To access them you are going to have to enable the shibboleth headers on your protected location:

<Location /SECUREPATH >
    AuthType shibboleth
    ShibRequireSession On
    ShibUseHeaders On
    Require valid-user
</Location>

You'll be able to access the parameters through the headers in your javascript. But Spoofing can happen https://wiki.shibboleth.net/confluence/display/SHIB2/NativeSPSpoofChecking

This is the way we have access to our headers. We use Shibboleth as its own apache server:

User access /secure path
Shibboleth redirects to IdP
IdP comes back to secure path which is available to see. Apache redirects /secure to our web server where we have a callback and access the attributes through the url. But we encrypt that url to make sure it came from us. I also have ShibUseHeaders Off

How I access the customer header in apache: how to access custom header value in apache?

How I encrypt the attributes: Multiple values RewriteMap prg

回答3:

By setting contentType to application/json within the Session Handler you will get a JSON object instead of the HTML at the URL /Shibboleth.sso/Session. You can request that in your client-side JavaScript app like any other JSON resource / REST Api.

<Handler type="Session" Location="/Session" showAttributeValues="true" contentType="application/json" />

See https://wiki.shibboleth.net/confluence/display/SP3/Session+Handler

来源：https://stackoverflow.com/questions/50953083/how-to-access-shibboleth-sp-attributes-in-angularjs-application

标签

javascript

angularjs

single-sign-on

saml-2.0

shibboleth