Bir web sitesi üç bileşenden oluştuğu söylenebilir :
Web sitesindeki Javascript ve CSS dosyalarının boyutlarının düşürülmesi sitenizi hızlandırır. Bu nedenle Obfuscator ve Minifier veya Compressor denilen uygulamaları kullanabilirsiniz. Bu uygulamalar dosya boyutlarını küçültmektedirler.
Bir web sitesini farklı user-agent'lar ile bağlanıp test edebilirsiniz. Örneğin web sitenizin bir mobil cihazdan bağlanıldığında nasıl davranacağını test edebilirsiniz. Bunun için Firefox tarayıcısında benzer görevi gören iki eklentiyi (plug-in) kullanabilirsiniz :
User Agent Switcher : https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
Modify Headers : https://addons.mozilla.org/en-US/firefox/addon/modify-headers/
Java'da bir web projesinde session zamanın değiştirmek içni web.xml dosyasında web-app elementinin (ana element) altına aşağıdaki bölümü eklemeniz gerekmektedir :
veya kod üzerinden değişirmek istiyorsanız aşağıdaki gibi değiştirilebilirsiniz :
session.setMaxInactiveInterval(15);
Bir resmin genişliği 100% olsun (ekranı kaplasın) ancak kendi genişliğinden daha da büyümesin (büyük ekranda resmin genişliği neyse o şekilde gözüksün) isteniyorsa aşağıdaki gibi bir biçim verilebilir :
Bu resim 100px den geniş ekranlarda 100px genişliğinde görülür fakat 100 px'den daha küçük ekran genişliklerinde resim ekran genişliğine sığdırılır.
Yukarıdaki stil internet explorer 8'de (IE8) çalışmamaktadır.
Bunu çözmek için stil aşağıdaki gibi tanımlanabilir :
Resmin genişliği 60px ise yukarıdaki gibi max-height:60px ifadesi eklenmesi gerekir. Bu şekilde IE8 de düzgün gözükecektir
Bu konuda kaynak makale detaylı açıklama bulunmaktadır : http://www.zeilenwechsel.de/it/articles/5/How-max-width-fails-in-IE8.html
Bir sunucuda bulunana kaynağınız, diğer sunuculardan client'a inen kaynaklar tarafından (örneğin javascript ve ajax) çağrılabilmesi için aşağıdaki gibi header bilgilerini response'a ekleyebilirisiniz :
Access-Control-Allow-Origin : *
Access-Control-Allow-Methods : GET,POST,OPTIONS
Access-Control-Allow-Headers :Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers
Yukarıdaki ifadeleri Header'a eklerseniz farklı sunucudan inen client kodları sizin kaynağınıza GET ve POST isteği yapabilir
Bir client kodundan farklı bir site üzerindeki bir kaynağa istek yaptığınızda aşağıdaki gibi bir hata alabilirsiniz :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'local ipniz burada' is therefore not allowed access
Bu hatanın çözülmesi için çağırmaya çalıştığınız sunucun CORS (Cross-Origin Resource Sharing) isteklerine (yani farklı bir sunucudan istek yapılmasına) izin vermiş olması gerekir. Sunucu response'larına aşağıdaki ifadeler eklenebilir :
Access-Control-Allow-Origin : *
Access-Control-Allow-Methods : GET,POST,OPTIONS
Access-Control-Allow-Headers :Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers
Bu şekilde diğer sunucunun kaynağına GET veya POST isteği yapabilirsiniz
<script type="text/javascript"> $('#submitButton').on('click', function () { $.confirm({ title: 'Confirm!', content: 'Simple confirm!', confirm: function () { alert('Confirmed!'); }, cancel: function () { alert('Canceled!') } }); }); </script> Yukarıdaki örnekte gerekli script ve css dosyalarının bower_components klasörü altında olduğuna dikkat ediniz. jquery-confirm kütüphanesini bower ile de kurabilirsiniz. Eğer bower kullanmıyorsanız jquery-confirm'in örnek projesini sitesinden indirip yukarıdaki dosyaları projenize ekleyebilirsiniz.Insert title here <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bower_components/jquery-confirm2/dist/jquery-confirm.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer">
{lang:'tr'}
</script>
Ardından düğmenin kendisi eklenir<div class="g-signin2" data-onsuccess="onSignIn"></div>Eğer üye zaten loginli ise işlemi başarılı olur ver onSignIn yöntemi çağrılır. Kullanıcı bu durumda giriş ekranını görmesine dahi gerek yoktur. Eğer Google'a daha önce giriş yapmadıysa Google giriş ekranı açılır.
<script type="text/javascript">
function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
var xhr = new XMLHttpRequest();
xhr.open('POST',
'#{request.contextPath}/GoogleTokenSigninServlet');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if(xhr.status==200){
location.href="/";
}
};
xhr.send('idtoken=' + id_token);
}
</script>
Eğer işlem başarılı olursa GoogleTokenSigninServlet adında bir Servlet çağrılır. Bu Servlet kullanıcının mail adresi vb.. bilgilerini alan ve giriş yapan, eğer üye değilse kayıt yapan servlettir.
@WebServlet("/GoogleTokenSigninServlet")
public class GoogleTokenSigninServlet extends HttpServlet {
private String CLIENT_ID = "1047450979973-rqpakuc4ekv7a79enedssgtpahcjo8ds.apps.googleusercontent.com";
public GoogleTokenSigninServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String idtoken = request.getParameter("idtoken");
if(idtoken==null || idtoken.isEmpty()){
System.out.println("Invalid google ID token.");
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
GoogleIdTokenVerifier verifier = new GoogleIdTokenVerifier.Builder(new NetHttpTransport(), new JacksonFactory())
.setAudience(Collections.singletonList(CLIENT_ID))
.build();
GoogleIdToken idToken=null;
try {
idToken = verifier.verify(idtoken);
} catch (GeneralSecurityException e) {
e.printStackTrace();
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
if (idToken != null) {
Payload payload = idToken.getPayload();
String userId = payload.getSubject();
System.out.println("User ID: " + userId);
String email = payload.getEmail();
boolean emailVerified = Boolean.valueOf(payload.getEmailVerified());
String name = (String) payload.get("name");
System.out.println("email:" + email + " emailVerified:" + emailVerified+" name:"+name);
// üye mi değil mi kontrol ediliyor email adresine gore.
// üye değilse kayıt ediliyor. Üye ise sadece login yapılıyor
response.setStatus(HttpServletResponse.SC_OK);
return;
} else {
System.out.println("Invalid ID token.");
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
}
}
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '692669434443081',
cookie : true,
xfbml : true,
version : 'v3.1'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Ardından düğmenin kendisi eklenir<fb:login-button size="large" scope="public_profile,email" onlogin="checkLoginState();"> <span style= "margin-right: 10px;">Facebook</span> </fb:login-button>Burada JSF kullanıldığı için fb namsepace'i xmlns:fb="http://www.facebook.com/2008/fbml" şeklinde eklenmiştir.
<script>
function statusChangeCallback(response) {
if (response.status === 'connected') {
FB.api('/me', {fields:'id,name,email'}, function(meResponse) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '#{request.contextPath}/FacebookTokenSigninServlet');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if(xhr.status==200){
location.href="/";
}
};
xhr.send('token=' + response.authResponse.accessToken
+'&userID='+response.authResponse.userID
+'&email='+meResponse.email
+'&name='+meResponse.name);
});
}
}
</script>
<script type="text/javascript">
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
</script>
Eğer işlem başarılı olursa FacebookTokenSigninServletadında bir Servlet çağrılır. Bu Servlet kullanıcının mail adresi vb.. bilgilerini alan ve giriş yapan, eğer üye değilse kayıt yapan servlettir.
@WebServlet("/FacebookTokenSigninServlet")
public class FacebookTokenSigninServlet extends HttpServlet {
private String CLIENT_ID = "1047450979973-rqpakuc4ekv7a79enedssgtpahcjo8ds.apps.googleusercontent.com";
public FacebookTokenSigninServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String token = request.getParameter("token");
String userID = request.getParameter("userID");
String name = request.getParameter("name");
String email = request.getParameter("email");
if(token==null || token.isEmpty() || userID==null || userID.isEmpty()){
System.out.println("Invalid facebook ID token.");
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
if(email==null || email.isEmpty()){
System.out.println("Invalid facebook ID token.");
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
// GET appToken from appLink
String accessToken = getAccessToken(token);
if(accessToken==null){
System.out.println("access token is null");
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
boolean validate=validate(token, accessToken, userID);
if(!validate){
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return;
}
try {
// üye mi değil mi kontrol ediliyor email adresine gore.
// üye değilse kayıt ediliyor. Üye ise sadece login yapılıyor
response.setStatus(HttpServletResponse.SC_OK);
return;
} catch (DatabaseException e) {
e.printStackTrace();
response.setStatus(HttpServletResponse.SC_BAD_GATEWAY);
return;
}
}
private String getAccessToken(String token) throws ClientProtocolException, IOException{
String appLink =
"https://graph.facebook.com/oauth/access_token?"
+ "client_id=692669434443081&client_secret=123456&"
+ "grant_type=client_credentials";
String accessToken = null;
DefaultHttpClient httpclient = new DefaultHttpClient();
try {
HttpGet httpget = new HttpGet(appLink);
ResponseHandler<String> responseHandler = new BasicResponseHandler();
String responseBody = httpclient.execute(httpget, responseHandler);
JsonParser parser = new JsonParser();
JsonObject json = parser.parse(responseBody).getAsJsonObject();
return json.get("access_token").getAsString();
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
httpclient.getConnectionManager().shutdown();
}
return accessToken;
}
private boolean validate(String token, String accessToken, String userID) {
String link = "https://graph.facebook.com/debug_token?input_token="
+ token + "&access_token=" + URLEncoder.encode(accessToken);
DefaultHttpClient httpclient = new DefaultHttpClient();
try {
HttpGet httpget = new HttpGet(link);
ResponseHandler<String> responseHandler = new BasicResponseHandler();
String responseBody = httpclient.execute(httpget, responseHandler);
Map map=getGraphData(responseBody);
if(map.get("user_id").equals(userID)){
return true;
}
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
httpclient.getConnectionManager().shutdown();
}
return false;
}
private Map getGraphData(String fbGraph) {
Map fbProfile = new HashMap();
JsonParser parser = new JsonParser();
JsonObject json = parser.parse(fbGraph).getAsJsonObject();
JsonObject data=(JsonObject)json.get("data");
fbProfile.put("user_id", data.get("user_id").getAsString());
if(json.has("first_name")){
fbProfile.put("first_name", json.get("first_name").getAsString());
}
if(json.has("last_name")){
fbProfile.put("last_name", json.get("last_name").getAsString());
}
if (json.has("email")){
fbProfile.put("email", json.get("email").getAsString());
}
return fbProfile;
}
}